react父子组件的传值

如何创建一个子组件呢？

1. 首先需要创建一个recat文件（这里我创建的是TodoItem.js），然后在这个文件中引入react，最后import default出去

   import React,{ Component } from 'react';
   class TodoItem extends Component{
       render() {
           return "123"
       }
   }
   
   export default TodoItem;
   

2. 然后在父组件中（这里父组件是TodoList）引入地址，在需要使用组件的地方使用即可。

   //在头部引入地址
   import TodoItem  from "./TodoItem";
   //在需要的地方引入组件
   <TodoItem></TodoItem>
   

父组件如何向子组件传值呢？

父组件向子组件传值一般使用属性的方式，子组件通过this.props.属性接收

  	//通过属性content传值
  	<TodoItem content={item}></TodoItem>
  	//然后使用this.props.属性接收
  	<li>{this.props.content}</li>

子组件如何向父组件传值呢？

其实是一样的也是通过属性将方法传递给子组件，子组件接收。

//因为子组件中没有handleClickDelet这个方法，所以父组件传递过去的事件强制让this指向父组件
<TodoItem content={item} index={index} TodoItemDelet={this.handleClickDelet.bind(this)}></TodoItem>
//子组件中使用this.props.方法去接收
this.props.TodoItemDelet(this.props.index)

完整代码

父组件

// 若要使用fragmen首先需要在这里引入
import React,{ Component,Fragment } from 'react';
import TodoItem  from "./TodoItem";
class TodoList extends Component {
    //constructor中设置state的数据结构
    constructor(props) {
        super(props);
        this.state = {
            inputValue:'',  //input中的默认值
            list:[]        //列表项的默认值
        }
    }
    render() {
        return (
            //使用Fragment不会被显示
            <Fragment>
                {/*获取input的默认值，并且监听input的值*/}
                <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
                {/*点击按钮执行增加*/}
                <button onClick={this.handleClick.bind(this)}>按钮</button>
                <ul>
                    {
                        //将list中的数据循环出来
                        this.state.list.map((item,index)=>{
                            return <TodoItem content={item} index={index} TodoItemDelet={this.handleClickDelet.bind(this)}></TodoItem>
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    //监听input值的变化
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    //点击更改数据
    handleClick(){
        this.setState({
            //。。。是es6中的展开运算符，以下意思是，将list原来的数据跟换成inputValue监听的值，并且将inputValue设置为空
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }
    //点击删除对应下标的值
    handleClickDelet(index){
        //首先需要展开list
        const list = [...this.state.list];
        //删除点击下标的值
        list.splice(index,1);
        this.setState({
            //更改state中的数据
            list:list
        })
    }
}
export default TodoList;

子组件

import React,{ Component } from 'react';
class TodoItem extends Component{
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    render() {
        return <li onClick={this.handleClick}>{this.props.content}</li>
    }
    handleClick(index){
        this.props.TodoItemDelet(this.props.index)
    }
}
export default TodoItem;

写博客的第三天，可能写得不太好，如果有什么问题，大家可以指出来哦，谢谢大家阅读~~