美文网首页
react中父组件的操作触发的函数需要用到子组件内的数据作为参数

react中父组件的操作触发的函数需要用到子组件内的数据作为参数

作者: YYYYHHHHHHHHHH | 来源:发表于2017-09-06 11:57 被阅读0次

    标题名很长,其实说白了就是——子组件传值给父组件,但我一开始觉得这两种情况是不一样的。

    查了一下资料,这种情况有一个专用语“状态提升”。这是官方文档:https://doc.react-china.org/react/docs/lifting-state-up.html

    基本思想就是在父组件中定义一个state(这里是value)和改变这个state的函数(这里是setValue),然后把这个函数(setValue)通过props传给子组件;

    子组件直接通过props中传过来的函数来改变父组件中的value,最后父组件就可以直接用这个value。

    class Child extends React.Component{

    constructor() {

    super();

    this.state= {};

    }

    render(){

      return(

       <div onClick={()=>{this.props.setValue('aaa')}}></div>

      )

    class Parent extends React.Component{

         constructor() {

                super();

                this.state= {value:''};

                this.setValue=this.setValue.bind(this);

         }

    setValue(value) {

    this.setState({

    value

    });

    }

    dosomething(){

    console.log(this.state.value)

    }

    render(){

    return(

    <div>

    <button onClick={()=>{this.dosomething()}}

     <Child setValue={this.setValue}

    </div>

    )

    }

    相关文章

      网友评论

          本文标题:react中父组件的操作触发的函数需要用到子组件内的数据作为参数

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