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。onChangeJSX にある必要があります。

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

value小道具をに渡し<input>、onChangeハンドラーを使用してユーザーの操作に応じて渡された値を何らかの方法で変更するというトピックは、ドキュメントでかなりよく検討されています。

これらは、そのような入力をControlled Componentsと呼び、代わりにDOMにネイティブで入力の値とユーザーからのその後の変更をUn 統制コンポーネントとして処理させる入力を指します。

あなたが設定たびvalueの小道具をinputいくつかの変数に、あなたは、制御されたコンポーネントを持っています。これは、プログラムの方法で変数の値を変更する必要があることを意味します。そうしないと、入力しても常にその値が保持され、入力しても変更されません。入力時に値を更新するための入力のネイティブの動作はオーバーライドされます。ここでReactで。

したがって、その変数を状態から正しく取得し、状態を更新するハンドラーをすべて正しく設定します。問題はonchange、正しいonChangeハンドラではなく、ハンドラが呼び出さvalueれなかったため、入力に入力したときにハンドラが更新されなかったためです。あなたが使用して行うとonChangeハンドラをされて呼ばれる、value され、あなたが入力したときに更新され、あなたの変更を参照してください。

を使用value={whatever}すると、入力フィールドに入力できないようになります。使用する必要がありますdefaultValue="Hello!"。

https://facebook.github.io/react/docs/uncontrol-components.html#default-valuesを参照してください

また、onchangeあるべきonChangeポイントアウト@davnicwilとして。

これは、onChange関数が入力に記載されている適切な値を更新していないことが原因である可能性があります。

例：

<input type="text" value={this.state.textValue} onChange = {this.changeText}></input>

 changeText(event){
        this.setState(
            {textValue : event.target.value}
        );
    }

onChange関数で、上記の値フィールドを更新します。

私も同じ問題を抱えており、私の場合、還元剤を適切に注入しましたが、それでもフィールドに入力できませんでした。使用しimmutableている場合は、を使用する必要がありますredux-form/immutable。

import {reducer as formReducer} from 'redux-form/immutable';
const reducer = combineReducers{

    form: formReducer
}
import {Field, reduxForm} from 'redux-form/immutable';
/* your component */

あなたの状態はstate->formそうでなければならないことに注意してくださいあなたは明示的にライブラリを設定する必要があり、状態の名前もそうあるべきですform。この問題を見る

私にとって、次の簡単な変更は完璧に機能しました

<input type="text" 
        value={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* does not work */}

変更... value = {myPropVal}を... defaultValue = {myPropVal}

<input type="text" 
        defaultValue={props.letter} 
        onChange={event => setTxtLetter(event.target.value)} /> {/* Works!! */}

クラスコンポーネントコンテキストでは...

changeHandlerメソッドが通常の関数の場合：

handleChange(e){
    this.setState({[e.target.name]:[e.target.value]});
}

このように使用できます...onChange={(e)=>this.handleChange(e)}

<input type="text" name="any" value={this.state.any} onChange={(e)=>this.handleChange(e)}></input>

changeHandlerメソッドがアロー関数の場合：

handle = (e) =>{
        this.setState({[e.target.name]:[e.target.value]});
    }

このように使用できます... onChange={this.handle}

 <input type="text" name="any2" value={this.state.any2} onChange={this.handle} ></input>

これにより、「React入力テキストフィールドに入力できません」という問題が解決しました。