React输入文本默认值和onblur函数使输入文本只读

伙计们，我正在开发react js

我已经创建了一个输入文本和模糊的输入按钮，我正在调用一个方法和更新状态变量

但是如果我使用on blur而不是onChange那么输入文本就变成了只读字段

<!DOCTYPE html>
<html>
  <head>
    <script data-require="react@*" data-semver="0.13.3" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script data-require="react-jsx@*" data-semver="0.13.1" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/jsx">
      var App = React.createClass({
          getInitialState: function () {
              return {value: 'Hello!'};
          },
          changeTo: function (e) {
              this.setState({value: e.target.value});
          },
          render: function () {
              return (
                  <div>{this.state.value}
                      <input type="text" defaultValue={this.state.value || ''} 
                         value={this.state.value} onBlur={(e) => this.changeTo(e)} />
                  </div>
              );
          }
      });
      React.render(
          <App />,
          document.getElementById('app')
      );
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

您需要添加onChange侦听器，否则将无法工作

原因:当你指定value={this.state.}时。Value}意味着你将输入文本值绑定到变量值，react接管了更新输入框中的值的控制。通过添加onChange监听器，你告诉react调用组件函数来更新值，这基本上更新组件的状态，迫使它调用渲染函数并更新输入文本中的值。

      changeTo: function (e) {
          this.setState({value: e.target.value});
      },
      updateValue: function (e) {
          this.setState({value: e.target.value});
      },
      render: function () {
          return (
              <div>{this.state.value}
                  <input type="text" defaultValue={this.state.value || ''} value={this.state.value} 
onBlur={(e) => this.changeTo(e)} onChange={(e) => this.updateValue(e}/>
              </div>
          );
      }

相关内容

最新更新

热门标签：