React - _this2.SetStateは関数ではありません

Question

入力テキストを画面に印刷するコンポーネントを作成しようとしています。ここでは私が作業しているものを示します。

class SearchBar extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { term: '' }; 
    } 

    render() { 
    return (
     <div className="search-bar"> 
     <input value={this.state.term} onChange={event => this.SetState(event.target.value)} /> 
     The value of input is: {this.state.term} 
     </div> 
    ); 
    } 
} 

しかし、私はクロームコンソールでエラーを取得しておいてください。

bundle.js:19818 Uncaught TypeError: _this2.SetState is not a function 

任意のアイデア？私はあなたがこれをバインドする必要があると思う

おかげ

Answer 1

ようになるはずです、このコンテキストコンポーネントを実行していない：私はあなたが指定しなければならなかったと信じて

class SearchBar extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { term: '' }; 
 
    this.setInputState = this.setInputState.bind(this); 
 
    } 
 
    
 
    setInputState(event) { 
 
    this.setState({ term: event.target.value }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className="search-bar"> 
 
     <input value={this.state.term} onChange={this.setInputState} /> 
 
     The value of input is: {this.state.term} 
 
     </div> 
 
    ); 
 
    } 
 
}

Answer 2

は、（何もしゃれが意図していない）これを試してみてください。

Answer 3

{event => this.SetState（event.target.value）}関数をコンポーネントthisにバインドする必要があります。問題あなたのonChange機能が

コードは、このお試しください。この

const onChange = (event) => { this.setState({term:event.target.value}) } 

<input value={this.state.term} onChange={onChange.bind(this) /> 

Answer 4

を州で変更されたもの：

this.SetState({ term: event.target.value }) 

代わりに

this.SetState(event.target.value)