使用带有onBlur的输入字段和来自Reactjs JSX中的状态块输入的值？

Question

我已经做了一个小小的小提示来显示问题: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其与组件状态同步。这是因为组件可以随时重新渲染，并且该值与渲染旧值的状态不同步。