React子组件如何传值给父组件?这样传

父组件传值到子组件

先来温习一下在React中父组件如何传值给子组件:

利用props可直接实现由父组件传值给子组件

父组件中代码:

ReactDOM.render(
  <App text="hello world"></App>,
  document.getElementById('root')
)

其中text相当于在子组件的便签上嵌上了一个text属性,可以从子组件的props对象中直接取出来

子组件中代码:

export default function List(props) {
    return (
        <div>
          	{props.title} //注意:我这里用的是函数组件,如果用的是类组件的话props前面要加this
        </div>
    )
}

父传子很简单,就是一条props就可以解决,下面我们进入正题,说一下子传父是怎样完成的

子组件传值到父组件

这里涉及到一个自定义函数事件传值的问题,其实很好理解,用到还是上面父传子说到的在标签上设置属性的内容,下面我用例子为大家解开疑惑.

我将用一个微缩版TodoList的小案例讲解:
最终效果图:
(x是删除键)
React子组件如何传值给父组件?这样传_第1张图片

1.首先,我创建了三个组件,如下图所示
React子组件如何传值给父组件?这样传_第2张图片
其中index.js是入口文件,TodoList是父组件,Form和List是子组件,他俩代表的分别是输入框和输入框下的列表.
2.我们首先考虑一个问题,在Form组件中的输入框中输入的数据,该怎样才能体现在List组件的列表中呢?

答案是通过父组件TodoList传递,所以我们只能进行一个"子传父>>父传子"的过程

3.具体实现过程
(1)在父组件的子组件标签上创建好接收函数,还是上面说到的标签上嵌属性的内容

render() {
        return (
            <div>
                <Form onReceiveKeywords={this.handlerReceiveKeywords()}></Form>
            </div>
        )
    }

其中onReceiveKeywords是我自定义的一个函数事件,类似于文章开头那个例子中父传子中的text,而handlerReceiveKeywords则是函数名

(2)在父组件中写handlerReceiveKeywords函数相关内容

handlerReceiveKeywords = ()=>{
        return (keywords)=>{
            
        }
    }

像这样,其中keywords代表的是子组件中传递过来的参数,写好之后先这样放着,我们现在去子组件Form中进行传值

(3)在Form组件中写好关于输入框中的内容value的逻辑后,得到代码如下

export default class Form extends Component {

    state={
        value:''
    }

    handlerChange = ()=>{
        return (e)=>{
            this.setState({
                value:e.target.value
            })
        }
    }

    submitHandler = ()=>{
        return (e)=>{
            if(e.keyCode === 13){
                // console.log(this.state.value)
                this.props.onReceiveKeywords(this.state.value)
                this.setState({
                    value:""
                })
            }
        }
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.value} onChange={this.handlerChange()} onKeyUp={this.submitHandler()}/>               
            </div>
        )
    }
}

其中handlerChange函数是输入框中值发生改变时触发,submitHandler是在按下Enter键提交时触发,我们主要看submitHandler内的内容.

其中,我做了一个if判断,如果按下的是enter键时,我就会从父组件中获取到this.props.onReceiveKeywords这个,这不正是我们在父组件自定义的那个函数事件吗,然后我们只需要在这里进行传参就好了,将输入框内容value传值到父组件keywords,然后父组件就可以拿到子组件的值了.

(4)最后再用父传子的方法,将拿到的参数传递到List组件中渲染就可以了

为了防止基础不太好的小宝贝看不太懂,小编将这个小案例的完整代码粘在这里了,按照上文中目录图的目录结构创建好结构粘贴进去就好啦

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './todolist/TodoList.jsx';

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

TodoList.jsx

import React, { Component } from 'react'
import Form from "./Form.jsx"
import List from "./List.jsx"

export default class TodoList extends Component {

    state = {
        list:[]
    }

    handlerReceiveKeywords = ()=>{
        return (keywords)=>{
            console.log(keywords)
            this.state.list.push({
                id:new Date().getTime(),
                title:keywords
            })
            this.setState({})
        }
    }

    handlerDel= (id)=>{
        return ()=>{
            // console.log(id)
            let newlist = this.state.list.filter(item=>{
                return item.id !== id
            })
            this.setState({
                list:newlist
            })
        }
    }


    render() {
        return (
            <div>
                <Form onReceiveKeywords={this.handlerReceiveKeywords()}></Form>
                <List list={this.state.list} onDelKeywords={this.handlerDel}></List>
            </div>
        )
    }
}

Form.jsx

import React, { Component } from 'react'

export default class Form extends Component {

    state={
        value:''
    }

    handlerChange = ()=>{
        return (e)=>{
            this.setState({
                value:e.target.value
            })
        }
    }

    submitHandler = ()=>{
        return (e)=>{
            if(e.keyCode === 13){
                // console.log(this.state.value)
                this.props.onReceiveKeywords(this.state.value)
                this.setState({
                    value:""
                })
            }
        }
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.value} onChange={this.handlerChange()} onKeyUp={this.submitHandler()}/>               
            </div>
        )
    }
}

List.jsx

import React from 'react'
import PropTypes from 'prop-types'
export default function List(props) {
    return (
        <div>
            <ul>
                {props.list.map(item=>{
                    return <li key = {item.id}>{item.title} <span onClick={props.onDelKeywords(item.id)}>×</span></li>
                })}
            </ul>
        </div>
    )
}

List.propTypes = {
    list:PropTypes.array
}

感谢大家支持哦!

你可能感兴趣的:(react组件,react基础,react,react,javascript)