我有一个使用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
处理程序触发,同时仍然使用双向绑定来保持我的viewmodel同步,没有额外的样板。很遗憾&#39; valueLink&#39;覆盖&#39; onChange&#39;防止这种情况发生。
我还应该澄清一点 - 我并没有要求&#34;有什么方法可以做到这一点&#34;,因为有很多明显的方法可以做到这一点。我问过&#34;做这件事的惯用方法是什么?#34;反应。
答案 0 :(得分:4)
我意识到这是一个老问题,但我想让你知道我为解决这个问题而编写的一个小型开源库: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'))} />
);
}
});
我希望这可以帮助您或其他有类似问题的人。
答案 1 :(得分:-1)
不要使用LinkStateMixin
。它只适用于非常简单的形式。对于更高级的表单,我建议您处理onBlur
<form>
事件以执行所有&#34;输入更正&#34;。另一种可能的解决方案是使用单个onChange
处理程序来解析整个表单而不是单个条目。这可能性能稍差,但肯定是非常可预测的。