我是 React 的新手，正在嘗試制作一個 toDoApp。我正在嘗試創建一個 onClick 事件以從任務狀態中洗掉一個元素。但這似乎不起作用。我還可以問如何實作 id 鍵，以便我可以洗掉我想要的所需任務嗎？
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(){
super();
this.state = {
value: '',
tasks: []
};
this.handleChange = this.handleChange.bind(this)
this.addItem = this.addItem.bind(this)
this.removeItem = this.removeItem(this)
}
handleChange(event) {
this.setState({
value: event.target.value
})
}
addItem(){
if(this.state.value === ''){
alert('Enter a task!')
} else {
const newTask = [...this.state.tasks, this.state.value]
this.setState({
tasks: newTask,
value: ''
})
}
}
removeItem(){
this.state.tasks.pop()
this.setState({
tasks: this.state.tasks,
})
}
render(){
const itemList = this.state.tasks.map((num) =>
<li>{num}</li>
);
return(
<div>
<input type="text" value={this.state.value} onChange={this.handleChange}></input>
<button onClick={this.addItem}> </button>
<button onClick={this.removeItem}>-</button>
<ul>{itemList}</ul>
{this.state.tasks}
</div>
)
}
}
export default App;強文本
uj5u.com熱心網友回復：
pop()移除最后一個元素，但 React 不會像setState使用相同陣列呼叫的那樣重新渲染組件。您可以創建一個新陣列并將其用于更新狀態。
removeItem() {
this.state.tasks.pop()
this.setState({
tasks: [...this.state.tasks],
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/445675.html
標籤：javascript 反应