Zz皓
2019-02-13 15:43
如题,就是无法添加以及获取内容,也没有什么报错信息
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;
如下图:
React16.4 快速上手
40002 学习 · 134 问题
相似问题