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'))} />
    );
  }
});

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