react入门，简单的todolist--代码

重点

• 1、export import 成对出现，有导出才能导入
• 2、this.setState({}) 用于改变数据
• 3、父向子组件传值：
  以属性绑定方式，子组件中用 this.props 接收使用
• 4、子组件向父组件传值：
  父元素绑定属性是一个函数，子组件一属性方式接收，调用父组件函数来传值
• 5、组件名首字母大写
• 6、li中最好加上一个 key属性，key属性的值不能相同
• 7、尽量不要直接改变this.state的值，可以先定义一个值来接收，改变之后再重新赋值

index.js

import React from 'react';
import ReactDOM from 'react-dom';
// 组件  大写字母开头,  .js后缀可省略
import TodoList from "./TodoList";

import * as serviceWorker from './serviceWorker';

ReactDOM.render(<TodoList />, document.getElementById('root'));

TodoList.js

import React from 'react';
import TodoItem from './todoItem';


class TodoList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            'list':[],
            'inputValue':''
        }
        {/* this指向，函数如果不绑定this,函数内部的this指向的是button，
            所以需要绑定下this，bind(this)指的就是将目前的this绑定到这个函数,在constructor中更改this，就可以直接使用了 */}
        this.handleClick = this.handleClick.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleDel = this.handleDel.bind(this)
    }
    handleClick(){
        
        // 改变数据方法setState()，...放置老数据，逗号后添加新数据
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            // 顺带将输入框值清空
            inputValue: ""
        })
    }
    handleInputChange(e){
        this.setState({
            // 获取value  e.target.value
            inputValue:e.target.value
        })
    }
    handleDel(index){
        // 尽量不要直接去修改this.state的值,拷贝一个副本，达到性能更优
        const list = [...this.state.list];
        list.splice(index,1);
        // this.setState({
        //     list:list
        // })
        //对象左边和右边值一样的时候可以简写
        this.setState({list})
    }
    // li部分较多，可以单独用一个函数提出来
    getTodoItems(){
        return(
            this.state.list.map((item,index)=>{
                // content给子组件传值，以属性的方式传递，子组件接收父组件的值，使用props
                // key父组件自用，不传递给子组件
                return (
                     <TodoItem 
                         handleDel = {this.handleDel} 
                         key={index} 
                         content={item} 
                         index={index}
                      />
                    )
            })
        )
    }
    render(){
        return(
            <div>
                <div>
                    {/* value={this.state.inputValue} 绑定值到界面，主要用于清空的展示 */}
                    <input value={this.state.inputValue} type='text' onChange={this.handleInputChange}/>
                    <button onClick = {this.handleClick}>提交</button>
                </div>
                <ul>
                    {this.getTodoItems()}
                </ul>
            </div>
        )
    }
    
}

export default TodoList;

todoItem.js

import React from 'react';

class TodoItem extends React.Component{
    // 子组件向父组件传值，要调用父组件传递过来的方法,给父组件传值

    constructor(props){
        super(props);
        this.handleDel = this.handleDel.bind(this);
    }
    handleDel(){
        this.props.handleDel(this.props.index)
    }
    render(){
        // 定义对象常量来接收参数
        const {content} = this.props;

        return(
            <li onClick={this.handleDel}>
                {/* 通过props接收父组件传过来的值 */}
                {content}
            </li>
            
        )
    }
}

export default TodoItem;