Почему это работает, когда я делаю «состояние:», а не «задачи:» в функции addItem(). Я думал, что синтаксис таков, что вы ставите состояние, которое хотите изменить, что в этом и будет задачами:
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(){
super();
this.state = {
value: '',
tasks: []
};
this.handleChangeEvent = this.handleChangeEvent.bind(this)
this.addItem = this.addItem.bind(this)
}
handleChangeEvent(event) {
this.setState({
value: event.target.value
})
}
addItem(){
this.setState({
state: this.state.tasks.push(this.state.value),
value: ''
})
}
render(){
const itemList = this.state.tasks.map((num,index) => <li key = {index}>{num}</li>)
return(
<div>
<input type = "text" value = {this.state.value} onChange = {this.handleChangeEvent}></input>
<button onClick = {this.addItem}>+</button>
<button>-</button>
<ul>{itemList}</ul>
</div>
)
}
}
export default App;
Прежде всего, вы изменяете свое состояние, это первое правило при работе с управлением состоянием реакции. Никогда не изменяйте состояние. и вам нужно обернуть обработчики событий в анонимную функцию, чтобы вы могли передать свой объект события. Это ваш код, исправленный ниже ---
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
value: '',
tasks: []
};
this.handleChangeEvent = this.handleChangeEvent.bind(this)
this.addItem = this.addItem.bind(this)
}
handleChangeEvent(event) {
this.setState({
value: event.target.value
})
}
addItem(){
const tempTasksArray = this.state.tasks.concat(this.state.value)
this.setState({
tasks: tempTasksArray,
})
}
render(){
const itemList = this.state.tasks.map((num,index) => <li key = {index}>{num}</li>)
return(
<div>
<input
type = "text"
value = { this.state.value }
onChange = {(event) => this.handleChangeEvent(event) } />
<button onClick = {() => this.addItem }>
+
</button>
<button>
-
</button>
<ul>{ itemList }</ul>
</div>
)}
}
export default App;
Работает не. Вы видите обновление случайно, потому что изменяете старое состояние, чего никогда не следует делать.