reactjs - 在 Reactjs JSX 中使用带有 onBlur 的输入字段和状态 block 输入的值？

Question

我做了一个小 fiddle 来显示问题:http://jsfiddle.net/4TpnG/582/当您有一个附加了 onBlur 的输入框以及状态的初始值时，来自键盘的输入将被阻止。当附加 onChange 时，它​​可以正常工作。为什么会发生这种情况以及如何解决？我本希望它接受您输入的字符并更新 onBlur 状态。

var Test = React.createClass({

      getInitialState: function() {
        return {
          value: "hallo"
        };
      },

      render: function() {
          return ( < form >
            < div >
            Onchange: < input type = "text"
            value = {
              this.state.value
            }
            onChange = {
              this.handleChange
            }
            /><br/ >
            Onblur: < input type = "text"
            value = {
              this.state.value
            }
            onBlur = {
              this.handleChange
            }
            />
      </div >
            < /form>
    );
  },
  handleChange: function(e){
      this.setState({value: e.target.value});
  }
});

React.renderComponent(<Test/ > , document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>

Answer 1

value 属性将输入值与该状态联系起来，如果用户更改该值，则状态和输入值不再相互联系。所以 React 阻止了这种情况的发生。

您可能想改用defaultValue 属性。

如果您想使用 value 属性，则需要 onChange 将其与组件状态同步。这是因为组件可以随时重新渲染，并且如果该值与渲染旧值的状态不同步。