將ValueLink與ReactJS中的自定義onChange處理程序一起使用

Question

我有一個使用ReactJS和LinkStateMixin的表單，以在表單和基礎模型之間實現雙向綁定。

這很好用，但是在某些情況下，當特定字段值更改時，我希望狀態發生其他更改-例如，如果我更改字段“ A”，我想將字段“ B”重置為其他內容。

顯而易見的選擇是使用普通的onChange處理程序，但是由於LinkStateMixin在內部進行了設置，因此我無法在不破壞mixin的情況下覆蓋它。

顯然，我不能簡單地將valueLink用於相關組件，而不能在onChange處理程序中與自定義邏輯一起手動實現雙向綁定，但是能夠同時實現這兩種方法將valueLink 。

在ReactJS中有可能嗎？還是我需要使用LinkStateMixin放棄需要自定義事件處理邏輯的任何東西？

編輯-添加了非常簡單的代碼示例

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

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

我的實際情況稍微復雜些，但是簡而言之，這就是我要嘗試的工作-在更改字段時onChange處理程序，同時仍使用雙向綁定保持我的視圖模型同步，而無需其他樣板。 不幸的是，“ valueLink”會覆蓋“ onChange”，從而無法正常工作。

我還應該澄清-我並不是在問“有什么可能的方法來做到這一點”，因為有很多顯而易見的方法可以做到這一點。 我在問“這樣做的慣用方式是什么”。

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 。 它僅適用於非常簡單的表單。 對於更高級的表單，建議您處理<form>的onBlur事件以執行所有“輸入更正”。 另一種可能的解決方案是只有一個onChange處理程序來解析整個表單，而不是一個條目。 這可能會降低性能，但肯定可以預測。