[解決済み] Reactの入力テキストフィールドに文字が打てない

質問

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* を使うことになるでしょうが、私はこれを動作させようとしているだけです)。

どのように解決するのですか？

のケーシングが正しく行われていません。 onchange プロップを input . にする必要があります。 onChange をJSXで指定します。

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

を渡すという話題。 value プロップに <input> に変更し、ユーザーとのインタラクションに応じて渡される値を何らかの方法で onChange ハンドラは、かなりよく考えられた ドキュメントでは .

などの入力を参照しています。 制御されたコンポーネント と呼び、代わりに DOM が入力の値やその後のユーザの変更をネイティブに処理するような入力は 非制御部品 .

を設定すると、必ず value のプロップを設定すると input を何らかの変数に変換します。 であれば、制御されたコンポーネント . これはつまり が必要です。 でなければ、入力は常にその値を保持し、入力しても変化しません。入力時に値を更新する入力の本来の動作は オーバーライド を React で上書きしています。

というわけで、stateから正しく変数を取得し、stateを更新するハンドラもすべてうまく設定されています。問題だったのは onchange であり、正しい onChange ではハンドラが呼び出されないので value は更新されないままでした。入力時に onChange を使用すると、ハンドラ は が呼び出されると value は を入力すると更新され、変更内容が表示されます。