把JavaScript表达式提取到外面后无法添加内容了
如题,就是无法添加以及获取内容,也没有什么报错信息
import React from 'react';
import TodoItem from './TodoItem'
class TodoList extends React.Component {
constructor(props) {
super(props)
this.state = {
list: [],
inputValue: ''
}
this.handleBtnClick = this.handleBtnClick.bind(this)
this.handleInputChange = this.handleInputChange.bind(this)
}
// 增加内容
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
// 输入内容监听
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
// 删除内容
handleDelete(index) {
const list = [...this.state.list]
list.splice(index, 1)
this.setState({
list: list
})
}
// 获取内容
getTodoItems() {
this.state.list.map((item, index)=>{
return (
<TodoItem
deleteClick={this.handleDelete}
key={index}
content={item}
index={index}
/>
)
})
}
render() {
return (
<div>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange} />
<button onClick={this.handleBtnClick}>Add</button>
</div>
<ul>{this.getTodoItems()}</ul>
</div>
);
}
}
export default TodoList;

