通过使用input html的input name属性，我们可以有一个更动态的方法来更新对象属性。

DOM HTML输入名称属性

<input type="text" name="fname" handleChange={(e: any) => { updatePerson(e) }}/>
<input type="text" name="lname" handleChange={(e: any) => { updatePerson(e) }}/>

React / TSX object.assign

const [person, setPerson] = useState<IPerson>({});

   function updatePerson(e: React.ChangeEvent<HTMLInputElement>): void {
        const { name, value } = e.currentTarget;

        setPerson(prevState => {
            const newState = Object.assign(person, { [name]: value })
            return { ...prevState, ...newState };
        });
    }

第一种情况确实是语法错误。

因为我看不到组件的其余部分，所以很难理解为什么要在这里的状态中嵌套对象。在组件状态下嵌套对象不是一个好主意。尝试将初始状态设置为:

this.state = {
  name: 'jasper',
  age: 28
}

这样，如果你想要更新名称，你可以调用:

this.setState({
  name: 'Sean'
});

这能达到你的目标吗?

对于更大、更复杂的数据存储，我会使用Redux之类的东西。但这要高级得多。

关于组件状态的一般规则是只使用它来管理组件的UI状态(例如，活动，计时器等)。

看看这些参考资料:

https://facebook.github.io/react/docs/react-component.html#state https://facebook.github.io/react/docs/state-and-lifecycle.html

这里使用展开运算符和一些ES6

this.setState({
    jasper: {
          ...this.state.jasper,
          name: 'something'
    }
})

通过使用input html的input name属性，我们可以有一个更动态的方法来更新对象属性。

DOM HTML输入名称属性

<input type="text" name="fname" handleChange={(e: any) => { updatePerson(e) }}/>
<input type="text" name="lname" handleChange={(e: any) => { updatePerson(e) }}/>

React / TSX object.assign

const [person, setPerson] = useState<IPerson>({});

   function updatePerson(e: React.ChangeEvent<HTMLInputElement>): void {
        const { name, value } = e.currentTarget;

        setPerson(prevState => {
            const newState = Object.assign(person, { [name]: value })
            return { ...prevState, ...newState };
        });
    }

简单而动态的方式。

这将完成工作，但你需要设置所有的id为父，所以父将指向对象的名称，id = "jasper"，并命名输入元素的名称=属性在对象jasper。

handleChangeObj = ({target: { id , name , value}}) => this.setState({ [id]: { ...this.state[id] , [name]: value } });

试试这个:

const { jasper } = this.state; //Gets the object from state
jasper.name = 'A new name'; //do whatever you want with the object
this.setState({jasper}); //Replace the object in state