把JavaScript表达式提取到外面后无法添加内容了

来源:3-3 代码优化

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;



写回答 关注

1回答

  • 玉石兰儿
    2019-02-13 16:29:51
    已采纳

    https://img.mukewang.com/5c63d54e0001d3f407570508.jpg

    如下图:https://img4.mukewang.com/5c63d57800017bf708000281.jpg

    Zz皓

    我太粗心了,谢谢你的提醒

    2019-02-13 17:05:11

    共 1 条回复 >

React16.4 快速上手

结合实例带你快速入门React16基础语法,并完成Todolist功能开发。

40002 学习 · 134 问题

查看课程

相似问题