1. ホーム
  2. reactjs

[解決済み] React - _this2.SetStateは関数ではありません。

2022-02-12 20:44:11

質問

入力されたテキストを画面に印刷するコンポーネントを作ろうとしています。

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>
    );
  }
}

しかし、Chromeのコンソールでエラーが出続けています。

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

何かアイデアはありますか?

ありがとうございます。

解決方法は?

これを試してみてください。

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>
    );
  }
}