javascript - 在 ReactJS 中将 ValueLink 与自定义 onChange 处理程序一起使用

Question

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

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

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

显然，我可以简单地不对相关组件使用 valueLink 并在我的 onChange 处理程序中手动实现双向绑定(bind)以及自定义逻辑，但是如果能够两者兼顾。

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

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

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

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

我的真实场景稍微复杂一些，但简而言之，这就是我正在尝试做的事情 - 在字段更改时触发 onChange 处理程序，同时仍然使用双向绑定(bind)来无需额外的样板文件即可使我的 View 模型保持同步。不幸的是，“valueLink”覆盖了“onChange”，阻止了它的工作。

我还应该澄清一下——我不是在问“有什么可能的方法来做到这一点”，因为有很多显而易见的方法可以做到这一点。我在 react 中问“执行此操作的惯用方法是什么”。

Answer 1

我意识到这是一个老问题，但我想让您知道我为解决这个问题而编写的一个小型开源库: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'))} />
    );
  }
});

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