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

Question

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

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 将其与组件状态同步。这是因为组件可以随时重新渲染，如果值与将渲染旧值的状态不同步。

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

Using an input field with onBlur and a value from state blocks input in Reactjs JSX?

reactjs

react-jsx