React - 如何使用 handleInputChange function 来更改 state 值内的 state 值？

Question

I am currently trying to have an input field that edits a state value that is within a state value. The following is a state example

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

And the following is my handle input change function:

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

And the following is the field where I call it:

                <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,
                    },
                  }}
                />

How would I go about doing this?

Answer 1

You can use the spread operator to copy across old state info, before then overwriting it with the new stuff too:

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