1、子组件
import React, {Component} from "react";
export default class Event extends Component {
state = {
msg:''
}
// 使用官方推荐的获取节点的写法进行操作
title = React.createRef();
// 监听输入框的值
handleChange = (e) => {
this.setState({
msg:e.target.value
})
}
// 将监听到输入框的值追加到获取到的ul的DOM元素中去
handleAdd = () => {
let {current} = this.title; //解构refs绑定的dom
current.innerHTML += `<li>${this.state.msg}</li>`;
// 追加完成后清空输入框
this.setState({
msg:''
})
// 打印下是否获取到了ul下的所有子节点
console.log(current.childNodes);
// 通过操作DOM给每个子节点li再次添加点击事件
this.title.current.childNodes.forEach((item,index)=>{
item.onclick = ()=>{
item.innerHTML +=`<b>点击了li元素<b>`;
}
})
}
render() {
return (
<>
<input type="text" value={this.state.msg} onChange={this.handleChange}></input>
<button onClick={this.handleAdd}>添加数据</button>
<ul ref={this.title}></ul>
</>
)
}
}
2、父组件
import React, {Component} from "react";
import Event from "./components/Event"
class App extends Component {
render() {
return (
<>
<Event/>
</>
)
}
}
export default App;
上面大概就是说明了子组件如何单独抽取出去引入到父组件中去的,接着,可以尝试做一个简单的子组件,然后引入到父组件中去,再实现父组件向子组件的传值。
3、子组件
子组件中的msgData
以及data
的内容都是从父组件那边传下来的值
import React,{Component} from "react";
export default class Children extends Component {
render(){
console.log(this.props);
return (
<>
<h5>姓名: {this.props.msgData}</h5>
<h5>标题: {this.props.data}</h5>
</>
)
}
}
4、父组件开始传值
import React, {Component} from "react";
import Children from "./components/Children"
class App extends Component {
state = {
name:'小陈同学',
msgData:1000
}
render() {
const { name } = this.state;
return (
<>
<Children data={'父传子组件通信'} msgData={name}/>
</>
)
}
}
export default App;
用法总结
data可以是自己定义的一些自定义属性
// 父组件
<Main data={this.state.lit}>
// 子组件接收
this.props.data