Javascript TextField onChange与嵌套对象

我现在还有一个问题。我会尽力解释的

这是我的对象的结构。在“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
      />

• 这三项工作如期进行
• 最后一个覆盖了第三个的输入，不知道为什么
• handleChangeAllg：仅适用于“allgemein”中的对象，不适用于其他对象。看起来不对

---

为什么最后一个不起作用？有没有更优雅的方法来处理输入？

您在

handleChangeAllg

中犯了一个小错误。您总是在更改对象的

charname

属性，无论提供了什么

n

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

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

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

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

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

---

thx获取答案。“n”应该是事件的变量，但我认为这是错误的：-/对不起，我表达得不清楚。我将事件命名为=n。现在我修好了，很好用，谢谢！