Reactjs setState () dengan nama kunci dinamis?

EDIT: ini duplikat, lihat di sini

Saya tidak dapat menemukan contoh menggunakan nama kunci dinamis saat mengatur negara. Inilah yang ingin saya lakukan:

inputChangeHandler : function (event) {
    this.setState( { event.target.id  : event.target.value } );
},

di mana event.target.id digunakan sebagai kunci negara untuk diperbarui. Apakah ini tidak mungkin di Bereaksi?

Berkat petunjuk Cory, saya menggunakan ini:

inputChangeHandler : function (event) {
    var stateObject = function() {
      returnObj = {};
      returnObj[this.target.id] = this.target.value;
         return returnObj;
    }.bind(event)();

    this.setState( stateObject );    
},

Jika menggunakan ES6 atau Babel transpiler untuk mengubah kode JSX Anda, Anda dapat melakukannya juga dengan nama properti yang dihitung :

inputChangeHandler : function (event) {
    this.setState({ [event.target.id]: event.target.value });
    // alternatively using template strings for strings
    // this.setState({ [`key${event.target.id}`]: event.target.value });
}

Saat Anda perlu menangani beberapa elemen input yang dikontrol, Anda dapat menambahkan atribut nama ke setiap elemen dan membiarkan fungsi handler memilih apa yang harus dilakukan berdasarkan nilai event.target.name.

Sebagai contoh:

inputChangeHandler(event) {
  this.setState({ [event.target.name]: event.target.value });
}

Bagaimana saya mencapai ini ...

inputChangeHandler: function(event) {
  var key = event.target.id
  var val = event.target.value
  var obj  = {}
  obj[key] = val
  this.setState(obj)
},

Saya hanya ingin menambahkan, bahwa Anda juga dapat menggunakan de-structuring untuk memperbaiki kode dan membuatnya terlihat lebih rapi.

inputChangeHandler: function ({ target: { id, value }) {
    this.setState({ [id]: value });
},

Sejalan dengan .mappekerjaan seperti ini:

{
    dataForm.map(({ id, placeholder, type }) => {
        return <Input
            value={this.state.type}
            onChangeText={(text) => this.setState({ [type]: text })}
            placeholder={placeholder}
            key={id} />
    })
}

Perhatikan parameter []dalam type. Semoga ini membantu :)

Saya punya masalah serupa.

Saya ingin mengatur keadaan di mana kunci level 2 disimpan dalam variabel.

misalnya this.setState({permissions[perm.code]: e.target.checked})

Namun ini bukan sintaks yang valid.

Saya menggunakan kode berikut untuk mencapai ini:

this.setState({
  permissions: {
    ...this.state.permissions,
    [perm.code]: e.target.checked
  }
});

Dengan ES6 + Anda bisa melakukannya [ ${variable}]

Saya mencari solusi yang cantik dan sederhana dan saya menemukan ini:

this.setState({ [`image${i}`]: image })

Semoga ini membantu

this.setState({ [`${event.target.id}`]: event.target.value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
    });

Harap perhatikan karakter kutipan.

Keadaan Anda dengan kamus memperbarui beberapa kunci tanpa kehilangan nilai lainnya

state = 
{   
    name:"mjpatel"  
    parsedFilter:
    {
      page:2,
      perPage:4,
      totalPages: 50,
    }
}

Solusinya ada di bawah

 let { parsedFilter } = this.state
 this.setState({
      parsedFilter: {
        ...this.state.parsedFilter,
        page: 5
      }
  });

disini perbarui nilai untuk "halaman" kunci dengan nilai 5

Dapat menggunakan sintaks spread, seperti ini:

inputChangeHandler : function (event) {
    this.setState( { 
        ...this.state,
        [event.target.id]: event.target.value
    } );
},