ReactJS

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

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      addData: {
        [this.state.fullName]:{
            ...this.state.addData[this.state.fullName],
            [name]: value,
        }
      }
    });
}

Answer 2

每次一个 TextField 的值发生变化时，您都在分配全新的对象，而不是保留状态中的旧值。

我不确定 this.state.fullName 到底是什么，但为了获得您想要的状态结构，您可以像这样实现它：

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      addData: {
        ...this.state.addData,
        [name]: value
      }
    });
}

当析构 this.state.addData（使用 ...）时，您基本上是将其所有属性分配给新对象，然后添加额外的 [name]: value。重要的是将破坏置于新分配之上以更新最新值。

Answer 3

当您设置状态时，这是一个问题。当你使用

this.setState({
      addData: {
        [this.state.fullName]:{
            [name]: value
        }
      }
    });

这意味着您正在设置一个只有一个嵌套对象的新状态

addData { abc: value }

所以旧值丢失了。您需要在更改新值之前添加它们。试试这个

handleInputChange(event) {
    const { name, value } = event.target;
    const newData = {...this.state.addData};
    newData[name] = value;

    this.setState({ addData: newData });
}

或

handleInputChange(event) {
    const { name, value } = event.target;

    this.setState({
        addData: {
            ...this.state.addData,
            [name]: value
        }
    });
}

Answer 4

我觉得你应该先准备好你的数据然后把它设置到你的状态中或者这样试试

this.setState({
      addData: {
        [...this.state.fullName]:{
            [name]: value
        }
      }
    });

ReactJS - 从多个 TextField（未知数量）获取数据然后设置状态

ReactJS - Get data from multiple TextField (unknown quantity) then setState

javascript

textfield