首先 声明 react 两种绑定 事件的方法
1
<div onClick={this.funclick.bind(this)}></div>
funclick(){
}
2
<div onClick={this.funclick}></div>
funclick = () =>{
}
const { content } = this.props
等价于 this.props.content
一. 父子组件传值
父组件
引入子组件
import TodoItem from 'childCompented';
state = {
name:'大师兄'
}
handelChildClick = ()=>{
}
<TodlItem content={this.state.name} /> // 可以传多个参数
子组件
import react from 'react'
class TodoItem extends React.Component {
render () {
return (
<div>
<p>我是子组件{this.props.content}</p>
</div>
)
}
}
export default TodoItem
二、 子组件 触发 父组件方法(子组件 向父组件 传值)-----------------------------------------------------------
父组件
引入子组件
import TodoItem from 'childCompented';
state = {
name:'大师兄'
}
handelChildClick = (name)=>{
// 新的写法 里面接受一个 函数 此时 是异步
//this.setState((prevState)=>{ //prevState 只 this.state 保留原来的状态
//return{
//list:[...prevState .lise,prevState.name],
// name:name
//}
//})
原先的写法
this.setState({
list:[...this.state.lise,this.state.name],
name:name
})
此时的name 是 大师兄 pro 子组件传过来的
}
<TodlItem content={this.state.name} handleItemDelete = {this.handelChildClick } /> // 可以传多个参数 和方法
子组件
import react from 'react'
class TodoItem extends React.Component {
constructor(props){
super(props)
state = {
name:'大师兄pro'
}
//this.handleClick = this.handleClick.bind(this)
}
handleClick = () =>{
// 将content 传给 父组件
console.log(this.state.name)
this.props.handleItemDelete (this.state.name)
}
render () {
return (
<div>
<p onClick = {this.handleClick}>我是子组件{this.state.name}</p>
</div>
)
}
}
export default TodoItem