Reactコンポーネントのエラー（入力）

Question

[解決済み] 解決策は次のとおりです。1） 'React.Component'がそれ以上自動バインドされません。 2） 'filterText'変数を送信する必要がありました 'handleUserInput（filterText）' ...

ありがとうございました！

おはよう。 このコードは「React.createClass」を処理していますが、今は「React.Componentを拡張」に変更しようとしています。 目的は、inputにvalueを入力して要素をソートすることです。

コード：

TheSecondComponent... 
constructor(props){ 
super(props); 
} 
handleChange() { 
this.props.onUserInput(
    this.refs.filterTextInput.value 
); 
} 
render() { 
return (
    <form className='Center'> 
    <input 
     type="text" 
     value={this.props.filterText} 
     ref="filterTextInput" 
     onChange={this.handleChange} 
    /> 
    </form> 
); 
} 

TheFirstComponent... 
constructor(){ 
super(); 
this.state={'filterText': ''} // If to use setState here than I have one 
           more error, added in the end of the question 
this.handleUserInput=this.handleUserInput.bind(this); 
} 
getInitialState() { 
return { 
    filterText: '' 
}; 
} 
handleUserInput(filterText) { 
//this.setState({filterText: filterText}); 
this.state = {filterText: filterText}; 
} 
render() { 
    return (
    <div> 
    <div> 
    <SearchBar 
     filterText={this.state.filterText} 
     onUserInput={this.handleUserInput} 
    /> 
    <CreateButtons 
     source={this.props.citys} 
     filterText={this.state.filterText} 
    /> 
    </div> 
    </div> 
); 
    } 

は "React.createClass" のコードをWORKING： 私は入力に任意のテキストをしようとしています：

TheFirstComponent... 
({ 
handleChange: function() { 
this.props.onUserInput(
    this.refs.filterTextInput.value 
); 
}, 
render: function() { 
    return (
    <form className='Center'> 
    <input 
     type="text" 
     value={this.props.filterText} 
     ref="filterTextInput" 
     onChange={this.handleChange} 
    /> 
    </form> 
    ); 
    } 
    }); 

    TheSecondComponent... 
    ({ 
    getInitialState: function() { 
    return { 
    filterText: '' 
    }; 
    }, 
    handleUserInput: function(filterText) { 
    this.setState({ 
    filterText: filterText 
    }); 
    }, 
    render: function() {cl(this); 
    return (
    <div> 
    <div className='SLFirst'> 
    <SearchBar 
     filterText={this.state.filterText} 
     onUserInput={this.handleUserInput} 
    /> 
    <CreateButtons 
     source={this.props.citys} 
     filterText={this.state.filterText} 
    /> 
    </div> 
    </div> 
    ); 
    } 
    }); 

は、エラーが発生しています"入力"は値を書きません。私は入力していますが、何も変わりません。 〜のためにです

this.state={'filterText': ''}？

どうすればいいですか？ ''しかし 'sometext'を設定しない場合、この 'sometext'は変更できません。

"setState"が機能しなくなりました。 'SETSTATE' を使用する場合 そしてooooneより多くを持っている：あなたはhandleChange（）を結合しなかった

TypeError: Cannot read property 'filterText' of null 
    40 | <div> 
    41 | <div className='SLFirst'> 
    42 | <SearchBar 
> 43 |  filterText={this.state.filterText} 
    44 |  onUserInput={this.handleUserInput} 
    45 | /> 
    46 | <CreateButtons 

Answer 1

。 この問題を解決するには、コンストラクタ（）で "this"を使用しているメソッドをバインドする必要があります。

constructor(props){ 
    super(props); 
    this.handleChange = this.handleChange.bind(this) 
} 

handleChange() { 
this.props.onUserInput(
this.refs.filterTextInput.value 
); 
} 
render() { 
return (
    <form className='Center'> 
     <input 
     type="text" 
     value={this.props.filterText} 
     ref="filterTextInput" 
     onChange={this.handleChange} 
    /> 
    </form> 
     ); 
} 

Answer 2

this.state = {...}あなたの状態が

SETSTATEがオブジェクト

のいずれかを取ることができ SETSTATE機能を使用する更新する 、再レンダリングトリガされません、次のコードを試してみてください

//the following will update the filterText property on the state object 
    this.setState({filterText: ''}) 

または機能

this.setState(function(state){ 
    state.filterText = ''; 
    // make sure you return state 
    return state 
}) 

は

constructor(props){ 
    super(props); 
    this.state = { 
     filterText: 'initiale value' 
    } 
}