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. Вы всегда изменяете свойство 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,
    },
  }));
};

Тогда вам не нужно предоставлять дополнительный аргумент для этих функций:

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