组件通信
- 父组件向子组件传 值/对象/数组,子组件可以通过props获取
- 父组件向子组件传函数,子组件可以通过props调用
import React from 'react'
class Input extends React.Component{
constructor(props) {
super(props);
this.state = {
title:''
}
}
render() {
return <>
<input value={this.state.title} onChange={this.changeHandler}/>
<button onClick={this.onSubmit}>提交</button>
</>
}
changeHandler = (e) =>{
this.setState({
title: e.target.value
})
}
onSubmit = () =>{
this.props.submitTitle(this.state.title)
this.setState({
title:''
})
}
}
class List extends React.Component{
constructor(props) {
super(props);
}
render() {
return (<ul>
{this.props.list.map((item,index) =>{
return <li key={index}>{item.title}</li>
})}
</ul>)
}
}
class Basics04 extends React.Component{
constructor(props) {
super(props);
this.state = {
list:[
{
title:'xxx'
}
]
}
}
render() {
return (
<>
<Input submitTitle={this.onSubmitTitle}></Input>
<List list={this.state.list}></List>
</>
)
}
onSubmitTitle = (title) =>{
this.setState({
list:this.state.list.concat([{title}])
})
}
}
export default Basics04