Question

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 1

value属性将输入值绑定到该状态，如果用户更改了值，则状态和输入值不再相互关联。因此，React阻止了这种情况的发生。

您可能希望使用defaultValue属性。

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

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

1 个答案: