inputタグに文字列が入力できない

Question

前提・実現したいこと

現在Todoアプリを作成しながら、Reactの学習をしています。
エラーの修正が終わったので、動作確認をしたところTodoタスクを記入するinputタグに文字列が入力できないことに気がつきました。

該当のソースコード

  1 import React, {Component} from 'react';
  2
  3 class TodoInput extends Component {
  4   constructor(props) {
  5     super(props);
  6     this.state = {
  7       inputValue: '',
  8     };
  9     this.handleChange = this.handleChange.bind(this);
 10     this.handleClick = this.handleClick.bind(this);
 11   }
 12
 13   handleChange(e) {
 14     this.setState({
 15       inputValue: e.target.value,
 16     });
 17   }
 18
 19   handleClick() {
 20     const inputValue = this.state.inputValue;
 21     this.props.addTodo(inputValue);
 22   }
 23
 24   render() {
 25     return(
 26       <div className="TodoInput">
 27         <input placeholder="新規TODOを入力してください" value={this.state.inputValue} onChange={this.hadleChange} />
 28         <button onClick={this.handleClick} >登録</button>
 29       </div>
 30     );
 31   }
 32 }
 33 export default TodoInput;

試したこと

①登録ボタンを押して、エラーが出ないことを確認
②デベロッパーツールで空の文字列が表示されていることを確認
③placeholderの使い方が間違っていないかを確認
参考サイト：http://www.htmq.com/html5/input_placeholder.shtml
④onChangeに問題がないか確認
参考サイト：https://www.sejuku.net/blog/25060

Comments

[m.ts10806]

input にtypeが指定されていないようですが、そこは問題ありませんか？

[HayatoKamono]

掲載コードの行番号を除去していただけますか？コピペしようとすると行番号もコピーされてしまうので動作確認が出来ません。(追記：vapordogさんの回答をもって解決したようなので、次回から質問にコードを掲載する際は行番号を含めずに掲載して下さい）

[yatty]

「試したこと」に書くことを忘れていましたが、type="text"を追加しても挙動は変わりませんでした。

Answer 1

<input placeholder="新規TODOを入力してください" value={this.state.inputValue} onChange={this.hadleChange} /> タイプミスです。

✕ hadleChange
○ handleChange

Comments

[yatty]

修正したところ、正しく動作しました。
ありがとうございます。