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

2018-05-09  本文已影响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>
        );
    }
}
上一篇下一篇

猜你喜欢

热点阅读