无法在React输入文本字段中输入

Question

我正在尝试我的React.js的第一部分，并在很早的时候就陷入了困境…我有下面的代码，该代码将搜索表单呈现为<div id="search"></div>。但是，在搜索框中输入内容无济于事。

大概在通过道具并上下移动时会丢失一些东西，这似乎是一个常见问题。但是我很沮丧-我看不到缺少的东西。

var SearchFacet = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.searchStringInput.value
    )
  },
  render: function() {
    return (
      <div>
        Search for:
        <input
          type="text"
          value={this.props.searchString}
          ref="searchStringInput"
          onchange={this.handleChange} />
      </div>
    );
  }
});

var SearchTool = React.createClass({
  render: function() {
    return (
      <form>
        <SearchFacet 
          searchString={this.props.searchString}
          onUserInput={this.props.onUserInput}
         />
        <button>Search</button>
      </form>
    );
  }
});

var Searcher = React.createClass({
  getInitialState: function() {
    return {
      searchString: ''
    }
  },

  handleUserInput: function(searchString) {
    this.setState({
      searchString: searchString
    })
  },

  render: function() {
    return (
      <div>
        <SearchTool 
          searchString={this.state.searchString}
          onUserInput={this.handleUserInput}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <Searcher />,
  document.getElementById('searcher')
);

（最终，我会使用其他类型的，SearchFacet*但是我只是想让这一类正常工作。）

Answer 1

您尚未将onchange道具放在机箱中input。它必须onChange在JSX中。

<input
  type="text"
  value={this.props.searchString}
  ref="searchStringInput"
  onchange={this.handleChange} <--[should be onChange]
/>

在文档中充分考虑了将value
prop
传递给<input>，然后以某种方式更改响应以使用onChange处理程序响应用户交互而传递的值的主题。

他们将这些输入称为“
受控组件”，而将使DOM本地处理输入值和随后来自用户的更改的输入称为“非受控组件”。

每当您将valuean 的prop 设置input为某个变量时， 就会有一个Controlled Component 。这意味着您 必须
通过某种编程方式 来 更改变量的值，否则输入将始终保持该值并且永远不会更改，即使您键入-输入的本机行为（在输入时更新其值）也将 被覆盖 在这里反应。

因此，您可以正确地从状态中获取该变量，并可以设置一个处理程序来更新状态。问题是因为您拥有onchange并且onChange处理不正确，所以从未调用过该处理函数，因此value当您键入输入时，永远不会更新该处理函数。当你使用onChange处理程序
被 调用时，value 是 当你输入更新，你可以看到你的变化。