获取并更改state react js中对象内部的键值

handleChange = (e) => {
this.setState({

...this.state, postData: [this.state.postData.email, e.target.value]

})

}

使用handleChange方法并更新嵌套状态对象中的不同道具。

示例：更新以下状态对象中的steps和email：

this.state = {
initialMSG: '',
initialPos: 0,
initialMove: 0,
initialCoord: 0,
postData: { 'x': 2, 'y': 2, 'steps': 0, 'email': '' }
};

代码段

下面的代码片段可以提供一种可能的解决方案来实现假设/期望的目标：

class Thingy extends React.Component {
constructor(props) {
super(props);
this.state = {
initialMSG: '',
initialPos: 0,
initialMove: 0,
initialCoord: 0,
postData: { 'x': 2, 'y': 2, 'steps': 0, 'email': '' }
};
this.handleChange = this.handleChange.bind(this);
};

handleChange = e => {
const obj = {[e.target.name]: e.target.value};
console.log('updating postData: ', obj);
this.setState(
prev => ({
...prev,
postData: {
...prev.postData,
...obj
}
})
);
};

render() {
const { steps, email } = this.state.postData;
return (
<div>
Steps:
<input value={steps} onChange={this.handleChange} name='steps' />
<br/>
Email:
<input value={email} onChange={this.handleChange} name='email' />
</div>
);
}
};
ReactDOM.render(
<div>
DEMO
<Thingy />
</div>,
document.getElementById('reactDiv')
);

<div id='reactDiv' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

解释

• handleChange方法接受事件e作为参数
• steps和email的两个<input />元素都具有name
• 当值发生变化时，会触发相同的handleChange
• 然而，对于steps，name(即e.target.name(将是steps，而对于email，它将是email
• 此区别用于更新postData中的相关道具