Question

我正在尝试动态地更新我的状态，这是我当前的状态。

this.state = {
      title: "",
      image: "",
      imageFile: "",
      formTitle: "",
      formMessage: "",
      formImage: "",
      Item: {
        name: "Name",
        price: "",
        quantity: "",
        discount: "",
        shipping: "",
        image: "",
        formType: ""
      }
    }

如何在文本框中动态更新，而不是一个接一个地更新？

 setItemName = (name) => {
    this.setState({
      Item: {
        ...this.state.Item,
        name
      }
    });
  };

这是我解决这个问题的尝试

这是我使用材质UI的文本框

<TextField
                      className="my-24"
                      label="Item Name"
                      autoFocus
                      id="itemName"
                      name="itemName"
                      width={1}
                      value={this.state.Item.name}
                      onChange={this.setItemName}
                      variant="outlined"
                    />

谢谢！

Answer 1

据我所知，您想动态更改状态字段，而不是一一编写函数...。

setItemName = (changedValue, type) => {
  this.setState({
    Item: {
      ...this.state.Item,
      [type]: changedValue
    }
  });
};

您的TextField将成为...

<TextField
  className="my-24"
  label="Item Name"
  autoFocus
  id="itemName"
  name="itemName"
  width={1}
  value={this.state.Item.name}
  onChange={(changedValue) => this.setItemName(changedValue, 'name')}
  variant="outlined"
/>

您只需要在setItemName参数中传递状态字段名称。至于“价格”，您需要编写setItemName（changedValue，'price'）

Answer 2

没关系，

我解决了这个问题，

这是我的参考代码：

setItemValue = (field,value) => {
    console.log(field,value)
    this.setState(prevState => ({
      Item: {                   // object that we want to update
          ...prevState.Item,    // keep all other key-value pairs
          [field] : value       // update the value of specific key
      }
  }))

Answer 3

您也可以尝试以下代码

handleChange = e => {
  this.setState({
     Item: {
       ...this.state.Item,
      [e.target.name]: e.target.value
     }
});

使用名称属性作为状态键：

<TextField
    rowsMax={4}
    placeholder="Enter name"
    value={name}
    name="name"
    onChange={this.handleChange}
  />

Answer 4

setItem = (key, value) => {
  this.setState({
    Item: {
      ...this.state.Item,
      [key]: value
    }
  });
});

与对象反应状态

4 个答案: