react state名を変数で作成


  this.state = {
    name:true,
    name1:true,
  }
/中略/
  Change = (n) => {
    this.setState({ name: !this.state.name });
  };

例えば上記のようなコードがあった場合、
Changeの部分のstate名をクリックした箇所の引数によって
変更することは可能でしょうか？

  Change = (n) => {//もしnに1が入ってきた場合
    this.setState({ "name"+n: !this.state."name"+n });
  };

のようなイメージです。

上記だとsyntaxerrorです・・・

行動規範の内容に同意します

回答1件

ベストアンサー

ES6では、オブジェクトリテラルのプロパティ名としても角カッコが使えます。

javascript
1Change = (n) => {//もしnに1が入ってきた場合
2    this.setState({ ["name"+n]: !this.state["name"+n] });
3  };
4
5// もっとも、もとの値を使った変化を行うときは、このように関数で更新するほうがいい
6Change = (n) => {//もしnに1が入ってきた場合
7    const key = 'name' + n;
8    this.setState((oldstate) => {
9      const value = oldstate[key];
10      return {[key]: !value};
11    });
12  };
13