美文网首页
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>
            );
        }
    }
    

    相关文章

      网友评论

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

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