Reactでthis.handle.bind(this)でエラーが出る

Question

React初心者です。
あるチュートリアルにしたがってコードを書いていますが、this.handle.bind(this)のところで、Inline Babel script:18 Uncaught TypeError: Cannot read property 'bind' of undefinedというエラーが出てしまいます。解決策教えてください。

// idを付けてdivを宣言してます
  <div id="content">
  </div>

  // reactとreact-domのライブラリを読み込む
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

  // babelを読み込む
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>

  <script type="text/babel">

const TodoList = (props) => {
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handle.bind(this); # ここです！！！！！！！！！
    this.state = {items: [], text: ''};
  }

  render() {
    return (
      <div>
        <h3>TODOアプリ</h3>
        <p>{this.state.text}</p>
        <form>
          <input onChange={this.handleChange} />
          <button>Add</button>
        </form>
        <TodoList items={this.state.items} />
      </div>
    );
  }

  handleChange(e) {
    this.setState({text: e.target.value});
  }
}

ReactDOM.render(
  < TodoApp />,
  document.getElementById('content')
);

  </script>

Answer 1

 this.handleChange = this.handle.bind(this); # ここです！！！！！！！！！

の箇所を

 this.handleChange = this.handleChange.bind(this); 

と修正して下さい。

Comments

[Shichi7]

ありがとうございます！