Question

这是我要更新的状态

 inputData: {
      id: '',
      inputArr: ['']
    }

我从我的状态生成输入

 inner = arr.input.map((inputs, index) => {
        return (
          <li key={index}>
            <label>{inputs.inputLabel}</label>
            <input
              name={index}
              //value={inputs.inputValue}
              type={inputs.inputType}
              onChange={this.handleChangeInp}
            />
          </li>

我应该如何使用hanldeChangeInp抓取输入并将其推送到inputArr，

这是我到目前为止所做的：

 handleChangeInp = e => {
    const index = Number(e.target.name)
    const inputData = this.state.inputData.inputArr.map((ing, i) => {
      i == index ? e.target.value : ing;
    });
    this.setState({ inputData });
  };

但是效果不是很好... 我正在输入多个数据，因此我需要将其放入数组中以便以后提取

Answer 1

如果您要做的就是在特定索引处更新数组的值。您可以简单地更新嵌套数组的索引，然后将state设置为更新后的inputData的值。

handleChangeInp = e => {
    const index = Number(e.target.name)
    // upon research, changing inputData directly will mutate state
    const {inputData} = this.state;
    // so, spreading inputArr into a new variable creates a copy
    const inputArr = [...inputData.inputArr]
    inputArr[index] = e.target.value;
    // set state will full object data
    this.setState({ inputData: {id: inputData.id, inputArr}});
};

如何使用对象内部的数组更新状态？

1 个答案: