我在react中创建了一个简单的列表类组件,出于某种原因,当值更新或点击要添加到列表的按钮时,它会添加上一个值而不是当前值.例如,如果文本区域中有"",然后我输入"e"使文本区域值为"e",然后按add.它将添加""而不是"e".只有在我再次点击add后,它才会显示"e",但这是因为这是新的前一个值.当我try 在控制台中测试状态已经更新后,它仍然保持相同的值,我不知道为什么,因为由于顺序,它应该更新之前显示.我可能会解释这个可怕的,裸着我,我很难解释问题.
class List extends React.Component{
constructor(props){
super(props);
this.state = {
listValue: '',
listAdd: ''
}
this.handleList = this.handleList.bind(this);
this.addValue = this.addValue.bind(this);
}
handleList(){
this.setState({
listAdd: this.state.listValue
})
this.addList(this.state.listAdd);
}
addValue(event){
this.setState({
listValue: event.target.value
})
console.log(this.state.listValue);
}
addList(value){
const node = document.createElement("li");
const textnode = document.createTextNode(value);
node.appendChild(textnode);
document.querySelector(".listBox").appendChild(node);
}
render(){
return(
<div className="box1">
<textarea className="textArea" maxLength={68} onChange={this.addValue}></textarea>
<button className="submit" onClick={this.handleList}>Add</button>
<ul className="listBox">
</ul>
</div>
);
}
}