父组件传值到子组件
先来温习一下在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是删除键)
1.首先,我创建了三个组件,如下图所示
其中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
}