ReactJS - 从多个 TextField（数量未知）然后 setState 获取数据

Question

我有一个列列表，它们呈现为 TextFields：

{columns.map((column, index) => (

    <TextField

        key={index}

        margin="dense"

        id={column}

        label={column}

        name={column}

        type="text"

        onChange={this.handleInputChange}

        fullWidth/> 

    ))}

和handleInputChange函数写成如下：

handleInputChange(event) {

    const target = event.target;

    const value = target.value;

    const name = target.name;

    this.setState({

      addData: {

        [this.state.fullName]:{

            [name]: value

        }

      }

    });

}

我想接收的数据是：

addData: {

    [name-of-column-1]: value,

    [name-of-column-2]: value,

    [name-of-column-3]: value,

    .......

}

但是 handleInputChange 函数在每次 TextField 更改后都会覆盖我收到的数据：

addData: {

    [name-of-column-1 (or 2, 3...)]: value,

}

有什么办法可以得到我需要的数据吗？谢谢大家！

Answer 1

我认为你应该先准备好你的数据，然后把它设置成你的状态或者用这种方式试试this.setState({&nbsp; &nbsp; &nbsp; addData: {&nbsp; &nbsp; &nbsp; &nbsp; [...this.state.fullName]:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [name]: value&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });