在 ReactJS 中使用带有自定义 onChange 处理程序的 ValueLink答案

【问题标题】：Using ValueLink with a custom onChange handler in ReactJS在 ReactJS 中使用带有自定义 onChange 处理程序的 ValueLink
【发布时间】：2014-11-17 04:36:35
【问题描述】：

我有一个表单，它使用 ReactJS 和 LinkStateMixin 在表单和底层模型之间实现双向绑定。

这很好用，但是在某些情况下，我希望在特定字段值更改时对状态进行其他更改 - 即，如果我更改字段“A”，我想将字段“B”重置为其他内容。

对此的明显选择是使用普通的onChange 处理程序，但是由于LinkStateMixin 在内部设置它，我无法在不破坏 mixin 的情况下覆盖它。

显然，我不能简单地将 valueLink 用于相关组件，而是在我的 onChange 处理程序中手动实现双向绑定以及自定义逻辑，但是能够同时执行这两个操作会更简洁。

这在 ReactJS 中是否可行 - 或者我是否需要放弃使用 LinkStateMixin 来处理任何需要自定义事件处理逻辑的事情？

编辑 - 添加了非常简单的代码示例

fieldAChanged: function(){
    this.setState({ fieldB: '' });
}

render: function(){ return (
    <input valueLink={linkState('fieldA')} onChange={this.fieldAChanged} />
    <input valueLink={linkState('fieldB')}/>
)}

我的真实场景稍微复杂一些，但简而言之，这就是我想要做的 - 当字段更改时触发 onChange 处理程序，同时仍然使用双向绑定来保持我的视图模型同步没有额外的样板。不幸的是，'valueLink' 覆盖了 'onChange'，阻止了它的工作。

我还应该澄清一下 - 我不是在问“有什么可能的方法来做到这一点”，因为有很多明显的方法可以做到这一点。我在反应中问“这样做的惯用方法是什么”。

【问题讨论】：

你能发布代码来演示你所看到的问题吗？很难从纯文本描述中重现。
添加了一个人为的快速示例

标签： javascript reactjs

【解决方案1】：

不要使用LinkStateMixin。它仅适用于非常简单的表格。对于更高级的表单，我建议您处理 <form> 的 onBlur 事件以执行所有“输入更正”。另一种可能的解决方案是使用单个 onChange 处理程序来解析整个表单而不是单个条目。这可能性能稍差，但肯定非常可预测。

【讨论】：

【解决方案2】：

我意识到这是一个老问题，但我想让你知道我写的一个小开源库来解决这个问题：reactlink-pipe

您可以在通过 valueLink 获取或设置值之前轻松运行强大的函数（无论您在 onChange 中所做的任何事情），同时您不必放弃 ReactLink 的语法糖 (即您不必编写一大堆样板文件onChange 函数）。

例如：

var pipeLink = require('reactlink-pipe');

function caps(text) { return text && text.toUpperCase(); }

var WithLink = React.createClass({
  mixins: [LinkedStateMixin],
  getInitialState: function() {
    return { name: 'foo' };
  },
  render: function() {
    // Will display "FOO", while this.state.name will still be "foo"
    return (
      <input type="text" valueLink={pipeLink(caps, this.linkState('name'))} />
    );
  }
});

我希望这对您或其他有类似问题的人有所帮助。

【讨论】：