React基础学习2-state-函数绑定

单纯的文字知识，是十分枯燥的，所以我们通过一段代码来引申出其中所涉及到的知识。

第一部分（数据 状态）

class Hello extends  React.Component{
第一行没什么好说的，这个组件叫hello，注意首字母需要大写
    constructor(props) {
        super(props);
        注意我们如何传递 props 到基础构造函数的
        this.state = {
            name: 0,
            list : ['learn English', 'learn react'],
            value: ''
        };
        this.handleClick = this.handleClick.bind(this);
    }

this.getValue = this.getValue.bind(this);这一段很有意思，绑定事件时，我们可以通过箭头函数来正确指向this，也可以通过上述的方法来实现。

如果我们的代码为

<button onClick={"this.handleClick"}></button>

此时点击事件是无效的，在这里你是找不到this.state的。
这是因为我们定义函数的时候，this指向组件，但是当你给button绑定函数的时候，此时this指向button这个按钮，所以我们需要将this与外层this做绑定，即this.handleClick = this.handleClick.bind(this);

第二部分（函数）

handleClick() {
        this.setState({
            list: [...this.state.list, this.state.value],
            value : ''
        })
    }

这是函数内容，我们不能通过this.state.list = 【“1”，“2”，“3”】这种方式直接去改变数据，我们需要用react给我们的setState这一方法来实现。

第三部分（JSX）部分

   render () {
        return (
            <div >
                <div className={"todolist"}>
                    <p className={"title"}>这是一个工作簿</p>
                    <input value={this.state.value} 
                    	    type="text" 
                          onChange={this.getValue}
                          placeholder={"请输入计划"}/>
                    <button onClick={this.handleClick}>添加</button>
                    <ul>
                        {
                            this.state.list.map( (item, index)=> {
                                return 
                                <Index
                                    delete={this.handleDelete}
                                    key={index} content= {item} index= {index}>  </Index>
                                    //父组件通过属性的方式传值
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
export default Hello;

这里的重点在于将一部分组件化了（Index组件），组件这一部分，我会在之后的博客提到