React入力テキストフィールドに入力できません

Question

私はReact.jsの最初のビットを試していて、早すぎました...私は<div id="search"></div>に検索フォームをレンダリングする以下のコードを持っています。しかし、検索ボックスに入力することは何もしません。

おそらく、何かが小道具を通過して上下することがなくなり、これは一般的な問題のようです。しかし、私は困惑しています - 何が欠けているのか分かりません。あなたが入力フィールドに入力することはできませんのでvalue={whatever}を使用

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*の他のタイプがありますが、私はこの1つだけが動作して取得しようとしている。）

Answer 1

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

ではあなたは正しく onchangeプロパティを同棲していません。それは onChangeである必要があります - それを試み、今それがハンドラを呼び出すかどうかを確認してください。

更新、この質問は意見をたくさん持っていると、余分なコンテキストのビットを提供すること価値があるので、：

<input>にvalue小道具を渡すの話題、その後、何らかの形で渡された値を変更しますユーザがonChangeハンドラを使用して対話したことに応答して、the official docsでかなりよく考慮されます。

これらの入力はControlled Componentsのような入力を参照し、入力を参照して、DOMの入力値とそれに続くユーザからの変更をネイティブでUncontrolled Componentsというように変更します。

Answer 2

はそれを行います。 defaultValue="Hello!"を使用してください。

は@davnicwilが指摘するようにまた、onchangeはonChangeをする必要があります

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

Answer 3

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

例のonChange関数で

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

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

が挙げ値フィールドを更新します。

Answer 4

私も同じ問題を抱えています。私の場合、レデューサーを正しく注入しましたが、まだフィールドに入力できませんでした。 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 */ 

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