6. state - Kite0301/react-my-app GitHub Wiki

次はタスクに左側に表示されているアイコンをクリックすると、チェックマークを付けられるようにしましょう。

Reactのコンポーネントで情報を管理する方法として、「props」の他に「state」というものがあります。
「props」がコンポーネント間の値の受け渡しであったのに対し、「state」はコンポーネント内で状態を管理するのに用います。

今、Listコンポーネントは2つ呼び出されていますが、それぞれのコンポーネントが「チェックされている状態であるか？」という情報を保存しておけば、その値をもとにアイコンの表示を切り替えることが可能です。

まず、必要なコードを整えましょう。

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
    }
  }

  render() {
    // 中略
  }
}

上記 constructor という部分を追加してください。
constructor はコンポーネントの初期設定を行うためのものです。

this.state = {
  checked: false,
}

という部分では、state の checked の値は、初期状態では false である、ということを意味しています。

render 内もstateを用いて書き換えてみましょう。

render() {
  return (
    <div className='list'>
      {this.state.checked
        ? <i className='fas fa-check-circle' />
        : <i className='far fa-circle' />
      }
      {this.props.title}
    </div>
  );
}

このように書くことで、this.state.checked の値が true の時はチェックマークが、
値が false の時は通常の◯が表示されるようになります。

では次は、このアイコンをクリックすると this.state.checked の値が false から true へ切り替わるようにしてみましょう。

まず、アイコン部分全体を <span> で囲みます。

<span>
  {this.state.checked
    ? <i className='fas fa-check-circle' />
    : <i className='far fa-circle' />
  }
</span>

「<span>をクリックしたら、〇〇をする」という処理を書いてみましょう。

changeChecked() {
  // ここに<span>をクリックした時の処理を書く
}

render() {
  return (
    <div className='list'>
      <span onClick={this.changeChecked.bind(this)}>
        {this.state.checked
          ? <i className='fas fa-check-circle' />
          : <i className='far fa-circle' />
        }
      </span>
      {this.props.title}
    </div>
  );
}

1. <span>にonClickを追加し、その値に{this.changeChecked.bind(this)}を指定します
2. renderの外でchangeCheckedというメソッドを用意します

このようにすることで、<span> をクリックすると、changeCheckedメソッドの中の処理が実行されるようになります。

後は、changeChecked の中に this.state.checked の値を書き換える処理を追加しましょう。

changeChecked() {
  this.setState({checked: !this.state.checked})
}

state の値を書き換えるには this.setState({名前: 値}) とします。
今の this.state.checked の値とは逆にしたいので、!this.state.checked と先頭に ! を付けています。

この時点での「index.js」のコードは こちら から確認できます。