Question

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

这很有效，但在某些情况下我希望在特定字段值更改时发生状态的其他更改 - 即如果我更改字段＆＃39; A＆＃39;，我想重置字段＆＃39; B＆＃39;别的什么。

显而易见的选择是使用普通的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处理程序触发，同时仍然使用双向绑定来保持我的viewmodel同步，没有额外的样板。很遗憾＆＃39; valueLink＆＃39;覆盖＆＃39; onChange＆＃39;防止这种情况发生。

我还应该澄清一点 - 我并没有要求＆＃34;有什么方法可以做到这一点＆＃34;，因为有很多明显的方法可以做到这一点。我问过＆＃34;做这件事的惯用方法是什么？＃34;反应。

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

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

Answer 2

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

在ReactJS中使用ValueLink和自定义onChange处理程序

2 个答案: