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

我正在尝试我的第一个 React.js，但很早就被难住了......我有下面的代码，它将搜索表单呈现为<div id="search"></div>。但在搜索框中输入内容却没有任何作用。

大概是在传递 props 和 state 的过程中缺少了一些东西，这似乎是一个常见的问题。但我很困惑——我看不出缺少什么。

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*但我只是想让这个发挥作用。）

Using value={whatever}将使您无法在输入字段中键入内容。你应该使用defaultValue="Hello!".

See https://facebook.github.io/react/docs/uncontrol-components.html#default-values https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

另外，onchange应该onChange正如@davnicwil 指出的那样。