Reactjs setState () dengan nama kunci dinamis?


248

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?


4
Ini adalah duplikat dari pertanyaan apa pun mengenai kunci objek dinamis. Tidak spesifik untuk bereaksi
Cory Danielson

9
var newstate = {}; newstate [event.target.id] = event.target.id; this.setState (newstate);
Cory Danielson

Terima kasih, saya tidak memiliki pegangan yang baik dalam menggunakan objek secara umum.
trad


@trad Saya dengan masalah ini, tetapi, apa yang Anda masukkan pada status awal Anda? Itu tidak masalah, kan?
Raphael Onofre

Jawaban:


280

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 });
}

27
Ada juga sintaks baru untuk ini, jika Anda menggunakan bablejs untuk membangun kode Anda. Anda dapat menggunakancomputed property names
Cory Danielson

Pendekatan kedua menyebabkan kesalahan sintaks di browser di Windows (IE, Chrome). Adakah yang memperhatikan?
benjaminz

bagaimana cara dinyatakan?
Muneem Habib

Terima kasih trad, inilah yang saya cari untuk menghindari duplikasi kode untuk <Radio />implementasi.
Adesh M

6
Jika Anda menetapkan negara menggunakan nama properti yang dihitung seperti ini: this.setState({ [event.target.id]: event.target.value });lalu bagaimana Anda mengakses keadaan itu menggunakan this.state......?
user3574492

142

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 });
}


7
apa yang ditunjukkan tanda kurung di sekitar [event.target.name]? Mengapa mereka dituntut?
user798719

1
Dibandingkan dengan pendekatan biasa untuk menamai setiap elemen secara terpisah seperti this.setState ({userName: e.target.value}); Ini akan menangani beberapa elemen formulir sebagai array dan tidak perlu mengatur setiap elemen individu
vikram jeet singh

1
tetapi masih bagaimana saya mengakses keadaan itu dengan cara yang sama? suka this.state([event.target.name])?
Kirankumar Dafda

1
Saya pikir dokumen web MDN dan posting ini menjelaskan mengapa kita membutuhkan tanda kurung.
Kelli

46

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 melakukan cara yang sama tetapi masalahnya adalah masih tidak membuat komponen, dan saya berlari pilar untuk memposting (termasuk ini: D), dan di suatu tempat menemukan ini: this.forceUpdate();yang seharusnya tidak terjadi dengan React terbaru. Mari kita lihat apa masalahnya nanti !!
xploreraj

24

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 });
},

10

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 :)


10

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
  }
});


2

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

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

Semoga ini membantu


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

Harap perhatikan karakter kutipan.


0

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


-4

Dapat menggunakan sintaks spread, seperti ini:

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

7
Bereaksi akan melakukan penggabungan objek untuk Anda, ini adalah praktik yang buruk.
Rohmer

1
pada dasarnya jika Anda memiliki beberapa objek dalam dan Anda ingin mengubah satu layak pada objek dalam itu Anda melakukannya seperti ini: this.setState ({selectedItems: {... selectedItems, [item.id]: true}})
Eran Atau
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.