Help us understand the problem. What is going on with this article?

ON/OFFスイッチ~React HPより~

ReactのHPでは,チュートリアルなど様様な情報を提供しています.
その中で,メインコンセプトとして,「イベント処理」というページでON/OFFスイッチを作っているのですが,僕の頭では見ても書いてもよくわからなかったので,登場するコードについてまとめてみます.

最初に

このページのわからないことを,どうやって調べたらいいかわからないので助けてください.

完成形

HPに書いてある以下のコードを書くと,クリックするONとOFFの文字で行き来するボタンが表示される時計が作れます
image.png

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

わからないこと

とりあえずわからないコードは,is ToggleOn: truebind!state.isToggleOn{this.state.isToggleOn ? 'ON' : 'OFF'}
調べ方が悪いのかbind以外,解説が全然出てこない(笑)

なので,以下に書いてあることは根拠がなく,すべて私の今の理解ですので,何かヒントや参考になるページ,修正があればコメントを頂きたいです.
よろしくお願いいたします.

私の理解

  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);
  }

ここでは初期値を設定してますね.
最初はisToggleOnはtrueです

render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }

ここでは,ボタンを設定していますね.
trueだと「ON」,falseだと「OFF」ってことですかね.

 handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

handleClickメソッドを定義していますね.
stateの内容を変更しています.
このメソッドにおけるisToggleOnは,その前の時点におけるstateのisToggleOnの真偽値を!で変更しているのかな??

参考

React HP

ShunichiroAbe
通信会社勤務の新卒1年目 工学系出身のプログラミング未経験者 頑張ります!!!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away