带有嵌套对象的 TextField onChange

Question

我马上有另一个问题。我会试着解释一下。

这是我的对象的结构。 “allgemein”内部目前有两个变量，但它会随着时间的推移而增加......

{
   id: "Abadi",
   name: "Abadi",
   type: "SC",
   allgemein: {
      charname: "Abadi",
      spieler: "Malte",
   },
   eigenschaften: {
      lebenspunkte: "30",
    },
   talente: {},
   zauber: {},
},

我得到这样的输入：

const {
        type,
        name,
        allgemein: { charname, spieler },
      } = this.state,
      { charakterID } = this.props;

return (
    <form>
      <TextField
        label="type"
        value={type}
        onChange={this.handleChange("type")}
        margin="dense"
        fullWidth
      />
      <TextField
        label="name"
        value={name}
        onChange={this.handleChange("name")}
        margin="dense"
        fullWidth
      />
      <br />
      <TextField
        label="charname"
        value={charname}
        onChange={this.handleChangeAllg("charname")}
        margin="dense"
        fullWidth
        />
        <br />
      <TextField
        label="spieler"
        value={spieler}
        onChange={this.handleChangeAllg("spieler")}
        margin="dense"
        fullWidth
      />

为了获得我的 TextField 的输入，我使用了以下句柄函数：

handleChange = (n) => ({ target: { value } }) => {
  this.setState({
    [n]: value,
  });
};

handleChangeAllg = (n) => ({ target: { value } }) => {
  this.setState((prevState) => ({
    ...prevState,
    allgemein: {
      ...prevState.allgemein,
      charname: value,
    },
  }));
};

• 这三个按预期工作
• 最后一个覆盖了第三个的输入，不知道为什么
• handleChangeAllg：仅适用于“allgemein”内的对象，不适用于其他对象。它看起来不正确。

为什么最后一个不起作用，是否有更优雅的方式来处理输入？

Answer 1

您在handleChangeAllg 中犯了一个小错误。无论提供什么n，您总是在更改对象的charname 属性。

handleChangeAllg = (n) => ({ target: { value } }) => {
  this.setState((prevState) => ({
    ...prevState,
    allgemein: {
      ...prevState.allgemein,
      [n]: value,
    },
  }));
};

这是一种很好的管理输入的方法。一个小的改进可能是使用属性名称来更改输入名称。

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

handleChangeAllg = ({ target: { value, name } }) => {
  this.setState((prevState) => ({
    ...prevState,
    allgemein: {
      ...prevState.allgemein,
      [name]: value,
    },
  }));
};

那么您不必为这些函数提供额外的参数：

<TextField
  label="type"
  value={type}
  name="type"
  onChange={this.handleChange}
  margin="dense"
  fullWidth
/>