react组件的拆分与传值

父组件通过属性的形式向子组件传值
子组件想要和父组件通信,调用父组件传递过来的方法
单项数据流:父组件可以向子组件传值,但是子组件一定不能直接的去改变这个值。

父组件:

import React ,{Component, Fragment} from 'react';
import TodoItem from './TodoItem';
import './style.css';

//react 响应式
//定义组件
class TodoList extends Component{
    //constructor 在组件创建的第一个时刻自动被执行
    //组件会接收外部传的参数,把这个参数传递给外部基类的构造函数
    //前两行固定写法
    constructor(props){
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleKeyUp = this.handleKeyUp.bind(this);
        this.handleItemClick = this.handleItemClick.bind(this);
        //在组件中创建了两个数据,数据一定要定义在state中
        this.state = {
            inputValue:'',
            list:[]
        }
    }
    handleInputChange(e){
        // console.log(e.target.value);
        // this.state.inputValue = e.target.value;不能直接这么改,会出错,使用固定的setState函数
        this.setState({
            inputValue:e.target.value
        })
    }
    handleKeyUp(e){
        // console.log(e.keyCode);
        //回车的keyCode值为13且内容不为空
        if(e.keyCode===13 && e.target.value!==''){
            //this.state.inputValue;
            //list中包含了list和input中的量
            const list = [...this.state.list,this.state.inputValue];
            //es6中如果键和值都是一样的,list:list 可以直接写list
            this.setState({
                list,
                inputValue:''
            })
        }
    }

    handleItemClick(index){
        //拿到当前数据,拷贝一个副本
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({list});
    }

    getListItems(){
        // 用map进行循环输出
        // map方法必须进行return
        return this.state.list.map((value,index)=>{
            // 加入key会使react的性能更高,key值是唯一的
            // 循环输出的每一项都要使用key,值不使用key会一直进行报警告
            // 向todoitem传递内容,可以是任意值,例如conten,title
            // 告诉子组件要显示什么,是value值
            // 父子组件的概念
            // 父组件通过属性的形式向子组件传值
            return (
                <TodoItem 
                    // 组件上不能写事件的绑定,可以对子组件上进行绑定
                    
                    content={value}
                    index ={index}
                    key={index}
                    // 父组件还可以给子组件传递方法
                    deleteFunction={this.handleItemClick}
                />
            )
        })        
    }
    //render函数决定组件渲染内容
    render(){
        //在render函数中,this指向的是这个组件
        //return一个内容出去,如果没有return出去,页面上是没有内容的
        return(
            <Fragment>
                {/* 对于jsx语法,一个属性等于一个js变量或者一个js表达式,需要用{}引起来 */}
                {/* <span>请输入内容:</span> */}
                <label htmlFor ='myinput'>请输入内容:</label>
                <input 
                    id = 'myinput'
                    className = 'input'
                    value = {this.state.inputValue} 
                    // handleInputChang函数的this指向的是undefined,需要使用bind将this指向变更成这个组件的指向,
                    // 也就是指向render()函数的指向,又由于render函数指向的是组件,也就是说handleInputChange也指向了这个组件
                    onChange = {this.handleInputChange}
                    //当按任意一个键,键弹起来的时候绑定的事件
                    onKeyUp = {this.handleKeyUp}
                    />
                <ul>
                    {this.getListItems()}
                </ul>
            </Fragment>
        );
    }
}
//在index引用之前要先将totolist暴露出去
//也就是把自己暴露出去,供别人使用
export default TodoList;

子组件

import React, {Component} from 'react';
class TodoItem extends Component{
    constructor(props){
        super(props);
        this.handleItemClick = this.handleItemClick.bind(this);
    }

    handleItemClick(){
        // 改变 父组件中的list数据
        // 子组件想要和父组件通信,他要调用父组件传递过来的方法
        // 对this.props.deleteFunction(this.props.index);进行简化
        const {deleteFunction,index} = this.props;
        deleteFunction(index);
    }
    render(){
        // this.props接收父组件传递过来的东西
        // 子组件通过this.props的属性,从父组件通过接收传递过来的值
        const { content } =this.props; //等价于 const content = this.props.content;
       
        return <li onClick={this.handleItemClick}>{content}</li>
    }
}
export default TodoItem;

小例子:实现一次传值过程,把hello world显示在页面上

  1. 创建一个父组件Father
  2. 创建一个子组件Son
  3. 子组件接收父组件的属性名content,content的属性值为"hello world"
  4. 把hello world显示在页面上

实现思路建议:
第一步:首先我们要定义父组件和子组件且分清,谁是父组件,谁是子组件
第二步:需要把子组件引入到父组件所在的文件当中
第三步:引入子组件import Son from './Son';
第四步:首先我们要在引入过来的子组件上去自定义一个属性,比如content,接着就是我们要把传入自组建的值写入到content属性值
<div> <Son content='hello world' /> </div>
第五步:那么接下来,我们要做的就是,如何去接收父组件传递过来的值,这里就要用到props属性,他的作用就是接收传值。这样,就接收到父组件传递过来的值,其中,this.props.content中的props后面的content就是在父组件当中,在子组件上自定义的content属性
<div>{this.props.content}</div>
Father.js

import React,{ Component } from 'react';
import Son from './Son';
class Father extends Component{
    render(){
        return (
            <div>
                <Son 
                    content='hello world'
                />
            </div>
        )
    }
}
export default Father;

Son.js

import React,{ Component } from 'react';

class Son extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
        <div>{this.props.content}</div> 
        )
    }
}
export default Son;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father';

ReactDOM.render(<Father />,document.getElementById('root'));
发布了33 篇原创文章 · 获赞 0 · 访问量 628
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览