美文网首页
react 子组件怎么向父组件传递数据

react 子组件怎么向父组件传递数据

作者: 新林吃遍世界 | 来源:发表于2018-05-09 14:44 被阅读0次

首先通过父组件给这个子组件传递一个事件,然后子组件通过参数传过来(传到父组件)
通过props来传递事件的引用,并通过回调的方式实现的,其实就是子组件调用父组件的方法,把数据以形参的方式传出来

父组件

 class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text : "我",
      editable : false
    }
  }
  render() {
    let {text,editable} = this.state
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">React子组件向父组件传递数据</h1>
        </
        <EditableCell
          value={text}
          editable= {editable}
          onChange={value => this.handleChange(value)}
        ></EditableCell>
        <button onClick={ e => this.edit()}>修改</
        <h2>{text}</h2>
      </div>
    );
  }
  edit() {
    this.setState({editable: true})
  }
  handleChange(value) {
    console.log("llllllllllllllll", value)
    this.setState({text:value})
  }

}

子组件

//通过传参来判断是否为可编辑状态
class EditableCell extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        let {editable , value ,onChange} = this.props;
        return (
            <div>
                {
                    this.props.editable ?
                    <input type="text" value={value} onChange={e => onChange(e.target.value)} style={{width:'96%',height:'38px',marginTop:'12px'}}/> :
                    value
                }
            </div>
        );
    }
}

相关文章

  • 弹窗设置(父子传参原理)

    父组件: 1.父组件向子组件传递数据父组件绑定属性,给子组件传递数据子组件通过props接收父组件传递过来的数据子...

  • 总结

    React组件之间的通信方式 1.父组件向子组件通信 React数据流动是单向的,通过props传递 2.子组件向...

  • Vue 组件之间传值

    1. 父组件使用props向子组件传递数据 2. 子组件使用$emit向父组件传递数据

  • uniapp 父子组件传值

    一、父组件向子组件传递数据(props) child parent 二、子组件向父组件传递数据(emit) par...

  • Vue中组件间传值总结 ------ 2020-05-17

    父子组件间传递数据的方式 1、父组件向子组件传递数据 2、子组件向父组件传递数据 3、父子组件相互传递同一数据的两...

  • React父子组件间的通信

    React数据流动是单向的,父组件向子组件的通信也是最常见的方式。父组件通过props向子组件传递需要的信息。子组...

  • vue父子组件传递数据方法

    标签(空格分隔): vue 父组件向子组件传递数据 Vue中父组件向子组件传递数据用props 举个例子 父组件中...

  • 父子传参

    父组件 父组件向子组件传递数据 1.父组件绑定属性,给子组件传递数据2.子组件通过props接收父组件传递过来的数...

  • vue子父组件通信

    子父组件传递数据 父组件===》子组件。父组件通过props向子组件中传递数据和改变数据的函数,通过在子组件中调用...

  • 父子组件之间的信息通信

    1.子组件向父组件传递数据 ①向子组件传递number属性,并把父组件传给子组件的number渲染到子组件中。父组...

网友评论

      本文标题:react 子组件怎么向父组件传递数据

      本文链接:https://www.haomeiwen.com/subject/zgsnrftx.html