react案例—实现组件之间的通信

1、react实现组件分三步：

1. 根据页面进行组件拆分
2. 编写静态组件（HTML和CSS的编写）
3. 实现动态组件

2、 父组件向子组件传递数据：

• 父组件直接在引入的子组件内写入要传递的参数即可，<List allList = {person}/>
• 在子组件中以 this.props接收参数

//父组件
import React from 'react';
import Add from './components/Add'
import List from './components/List'

class App extends React.Component{
  state = {
    person:['赵云','韩信','吉吉国王']
  }
  render(){
    const {person} = this.state;
    return (
      <div>
        <Add />
        <List allList = {person}/>
      </div>
    );
  }
}
export default App;

//子组件
import React from 'react';
class List extends React.Component{
  render(){
    const {allList} = this.props;
    return (
      <div>
        <ul>
          {
            allList && allList.map((item,index)=>{
            return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    );
  }
}
export default List;

3、子组件向父组件传递数据：

• 兄弟组件之间是不能够直接传值的，需要借助父组件；即子组件1=>父组件=>子组件2；
• 子组件向父组件传递数据需要借助事件触发，在子组件中调用父组件中定义的方法，将子组件state中的数据以函数参数的形式传递给父组件；

任务：在input标签输入名字，点击添加按钮，将名字加入到列表中，并清空输入框。

分析:

　　

 

•  子组件Add中的值传递给父组件App，父组件再传递给子组件List
• 问题1：子组件Add如何获取输入框内容
  • 通过非受控组件ref，<input type="text" ref={(input)=>this.input=input}/>，通过this.input.value获取值
  • 通过受控组件state，<input type="text" value={this.state.value} onChange={this.handleChange}/>，在this.handleChange中，由参数e.target.value获取值

• 获取input标签输入值后，通过this.setState({})同步到state
• 子组件传递数据给父组件
• 父组件中更新state中的数据（即传递给子组件List）

//父组件
import React from 'react';
import Add from './components/Add'
import List from './components/List'

class App extends React.Component{
  state = {
    person:['赵云','韩信','吉吉国王']
  }
  handleAdd = (e)=>{
    //e为拿到的添加值，如何将值添加到列表，只需更新列表数据数组
    const {person} = this.state;
    person.unshift(e);
    this.setState({
      person
    })

  }
  render(){
    const {person} = this.state;
    return (
      <div>
        <Add handleAdd = {this.handleAdd}/>
        <List allList = {person}/>
      </div>
    );
  }
}
export default App;

//子组件
import React from 'react';
class Add extends React.Component{
  state = {
    value:'',
  }
  handleChange = (e)=>{
    //如何更新input标签绑定的state中的value值
    this.setState({
      value:e.target.value,
    })
  }
  handleClick = ()=>{
    const {value} = this.state;
    this.props.handleAdd(value);
    this.setState({
      value:'',
    })
  }
  render(){
    // console.log(this.props.handleAdd)
    const {value} = this.state
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange}></input>
        <button onClick={this.handleClick}>点击添加</button>
      </div>
    );
  }
}
export default Add;