React添加评论和删除评论组件

提前准备：设置一个空的数组，一个空的value值。数组用于渲染li标签列表，value值是输入框初始值。

思路：获取输入框的值，先按钮点击判断一下输入框的值是否为空，不是为空的时候拿到输入框的值，cancat进去我们的空数组中，最后点击之后不要忘记吧输入框设置为空。删除评论组件是在子组件通过map的index下表，所以我们点击谁，就可以通过splice(index,1)删除我们被点击的元素

父组件：主要是按钮和输入框

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            item: [],
            text: ''
        }
        this.getValue = this.getValue.bind(this)
        this.submit = this.submit.bind(this)
    }
    getValue(e) {
        this.setState({
            text: e.target.value
        })
    }
    submit(){
        if (this.state.text.length === 0) return
        const newItem = {
            text: this.state.text,
            id: new Date().getTime()
        }
        this.setState({
            item: this.state.item.concat(newItem),
            text: ''    
        })
    }
//submit() { 方法二
       // if (this.state.text.length === 0) return
       // let arr = this.state.item
       // arr.unshift(this.state.text)
       // this.setState({
            //item: arr,
           // text: ''    
       // })
   // }
    render() {
        return (
            <div>
                <button onClick={this.submit}>add#{this.state.item.length}</button>
                <input onChange={this.getValue} value={this.state.text} placeholder="请输入"></input>
                <App item={this.state.item} ></App>
            </div>
        );
    }
}

子组件：评论展示和点击删除 在点击删除事件里，切记不要忘记用setState渲染页面，不然点击删除看不到效果

class App extends React.Component {
    constructor(props) {
        super(props);
        this.deleteList = this.deleteList.bind(this)
    }

    deleteList(e) {
        this.props.item.splice(e,1)
        this.setState({
        })
    }
    render() {
        return (
            <ul>
                {this.props.item.map((item, index) => {
                    return <li key={item.id} onClick={this.deleteList.bind(this, index)}>{item.text}</li>
                  // return <li key={index} onClick={this.deleteList.bind(this, index)}>{item}</li>//对应方法二

                })}
            </ul>
        );
    }
}