7. フォームの扱い - Kite0301/react-my-app GitHub Wiki

最後に、フォームを追加してタスクを追加できるようにしてみましょう。

そのためにまずは、Mainコンポーネントで各タスクのタイトルを state で管理するようにします。

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: ['トイレ掃除', 'ポチの散歩'],
    }
  }
  // 省略
}

tasks という名前で、配列を用いて管理しましょう。

render内でも this.state.tasks を用いて各タスクを表示するように変えましょう。

render() {
  return (
    <div className='main'>
      <h1>タスク一覧</h1>
      <div className='tasks'>
        {this.state.tasks.map((task, index) => {
          return (
            <List key={`list-${index}`} title={task} />
          )
        })}
      </div>
    </div>
  );
}

Reactで配列の中身を1つづつ表示するには、上記のように map を用いると便利です。
mapの中で表示する要素には、必ず key を指定する必要があります。

次に、フォームで新たに入力したタスク名を管理するための inputText という state を追加しましょう。

constructor(props) {
  super(props);
  this.state = {
    tasks: ['トイレ掃除', 'ポチの散歩'],
    inputText: '',
  }
}

初期状態では空の文字列 '' にしておきます。

実際に表示するフォームも追加しましょう。

render() {
  return (
    <div className='main'>
      <h1>タスク一覧</h1>
      <div className='tasks'>
        {this.state.tasks.map((task, index) => {
          return (
            <List key={`list-${index}`} title={task} />
          )
        })}
      </div>
      <form>
        <input type='text' />
      </form>
    </div>
  );
}

<form> を追加し、その中に <input> を追加しましょう。

先ほどの this.state.inputText の値が <input> の値になるので、以下のように value を追加します。

<form>
  <input
    type='text'
    value={this.state.inputText}
  />
</form>

しかし、この状態では this.state.inputText が常に '' なので、フォームに文字を入力しても何も表示されません。
ユーザーが文字を入力する度に、this.state.inputText の値が更新されるようにしましょう。

handleChangeText(event) {
  this.setState({inputText: event.target.value});
}

render() {
  return (
    <div className='main'>
      <h1>タスク一覧</h1>
      <div className='tasks'>
        {this.state.tasks.map((task, index) => {
          return (
            <List key={`list-${index}`} title={task} />
          )
        })}
      </div>
      <form>
        <input
          type='text'
          value={this.state.inputText}
          onChange={this.handleChangeText.bind(this)}
        />
      </form>
    </div>
  );
}

前の章で学習した onClick の代わりに、ここでは onChange を用いましょう。
<input>に文字を入力する度に handleChangeText というメソッドが呼ばれます。

メソッドの中では、event.target.value で入力した文字を取得することができます。

次に、値を送信した時（Enterキーを押した時）の処理を追加します。
「送信した時」は onSubmit を用います。

<form onSubmit={this.handleSubmit.bind(this)}>
  <input
    type='text'
    value={this.state.inputText}
    onChange={this.handleChangeText.bind(this)}
  />
</form>

handleSubmit メソッドも用意しましょう。

handleSubmit(event) {
  event.preventDefault()
}

フォームを送信すると、自動的にページ遷移が発生してしまいます。
これを防ぐため、onSubmit の処理内では event.preventDefault() を用いるようにします。

inputText の値を配列である tasks に追加します。

handleSubmit(event) {
  event.preventDefault()

  const newTasks = this.state.tasks    // 1
  newTasks.push(this.state.inputText)  // 2
  this.setState({
    tasks: newTasks,                   // 3
    inputText: '',                     // 4
  })
}

やや複雑ですが、やっていることは、

定数newTasksにthis.state.tasksの値（配列）を代入
newTasksの末尾にthis.state.inputTextの値を追加
stateのtasksの値を更新
stateのinputTextの値を空文字列に更新

となります。

最後に、空の状態では送信できないようにしたら完成です！

handleSubmit(event) {
  event.preventDefault()

  if (this.state.inputText === '') {
    return
  }

  const newTasks = this.state.tasks
  newTasks.push(this.state.inputText)
  this.setState({
    tasks: newTasks,
    inputText: '',
  })
}

完成した「index.js」のコードはこちらから確認できます。

やや急ぎ足で解説したのでわかりにくい箇所もあったかもしれませんが、これでReactの基礎を学習できたはずです。
最後まで読んでいただきありがとうございます。

最終更新: 2018/01/18

7. フォームの扱い - Kite0301/react-my-app GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️