Reactjs setState () với tên khóa động?

EDIT: đây là một bản sao, xem tại đây

Tôi không thể tìm thấy bất kỳ ví dụ nào về việc sử dụng tên khóa động khi đặt trạng thái. Đây là những gì tôi muốn làm:

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

trong đó event.target.id được sử dụng làm khóa trạng thái được cập nhật. Điều này là không thể trong React?

Nhờ gợi ý của @ Cory, tôi đã sử dụng:

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

    this.setState( stateObject );    
},

Nếu sử dụng ES6 hoặc bộ chuyển mã Babel để chuyển đổi mã JSX của bạn, bạn cũng có thể thực hiện việc này với các tên thuộc tính được tính toán :

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

Khi bạn cần xử lý nhiều yếu tố đầu vào được kiểm soát, bạn có thể thêm thuộc tính name cho từng thành phần và để chức năng xử lý chọn việc cần làm dựa trên giá trị của event.target.name.

Ví dụ:

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

Làm thế nào tôi hoàn thành điều này ...

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

Tôi chỉ muốn thêm, rằng bạn cũng có thể sử dụng cấu trúc lại để cấu trúc lại mã và làm cho nó trông gọn gàng hơn.

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

Trong vòng lặp với .mapcông việc như thế này:

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

Lưu ý []trong typetham số. Hi vọng điêu nay co ich :)

Tôi đã có một vấn đề tương tự.

Tôi muốn đặt trạng thái nơi khóa cấp 2 được lưu trữ trong một biến.

ví dụ this.setState({permissions[perm.code]: e.target.checked})

Tuy nhiên đây không phải là cú pháp hợp lệ.

Tôi đã sử dụng mã sau đây để đạt được điều này:

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

Với ES6 + bạn chỉ có thể làm [ ${variable}]

Tôi đang tìm kiếm một giải pháp đẹp và đơn giản và tôi đã tìm thấy điều này:

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

Hi vọng điêu nay co ich

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

Hãy nhớ các nhân vật trích dẫn.

Trạng thái của bạn với từ điển cập nhật một số khóa mà không mất giá trị khác

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

Giải pháp dưới đây

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

ở đây cập nhật giá trị cho "trang" chính với giá trị 5

Có thể sử dụng cú pháp lây lan, đại loại như thế này:

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