javascript - React - 如何使用 handleInputChange 函数来更改状态值内的状态值？

Question

我目前正在尝试使用一个输入字段来编辑状态值内的状态值。以下是状态示例

this.state = {
  modalDevice: {
    deviceName: "text" //this is what I want changed
  }
}

以下是我的句柄输入更改功能：

handleInputChange = (event) => {
    const { value, name } = event.target;
    this.setState({
      [name]: value,
    });
  };

以下是我称之为的领域：

                <TextField
                  label="Device Name"
                  value={this.state.modalDevice.deviceName}
                  name="deviceName"
                  variant="outlined"
                  required={true}
                  className="classes.textField"
                  style={{ width: 300 }}
                  onChange={this.handleModalInputChange}
                  InputLabelProps={{
                    classes: {
                      root: classes.cssLabel,
                      focused: classes.cssFocused,
                    },
                  }}
                  InputProps={{
                    classes: {
                      root: classes.cssOutlinedInput,
                      focused: classes.cssFocused,
                      notchedOutline: classes.notchedOutline,
                      input: classes.input,
                    },
                  }}
                />

我该怎么做呢？

标签： javascriptreactjs

Answer 1

您可以使用扩展运算符复制旧状态信息，然后再用新内容覆盖它：

this.setState({
  ...this.state,
  modalDevice: {
    ...this.state.modalDevice
    [name]: value,
  },
});