react子传父 - Powered by Discuz! Archiver

首页 › React论坛 › react子传父

廖建平 發表於 2019-6-23 18:32:00

react子传父

<p>react里子组件不能直接操作父组件的数据。</p>
<p>所以要从父组件传递一个方法给子组件，</p>
<p>子组件获取到该方法后，把子数据传入该方法，</p>
<p>父组件才能获取到子数据</p>
<p>例子：</p>
<p>子组件 Child.js</p>
<div class="cnblogs_code">
<pre>import React, { Component } from 'react'<span style="color: rgba(0, 0, 0, 1)">
class Child extends Component{
constructor(props){
   super(props)
   </span><span style="color: rgba(0, 0, 255, 1)">this</span>.state =<span style="color: rgba(0, 0, 0, 1)"> {
         cdata:</span>"子组件数据"<span style="color: rgba(0, 0, 0, 1)">
   }
}
render(){
   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">(
         </span><div>
            <button onClick={<span style="color: rgba(0, 0, 255, 1)">this</span>.trans.bind(<span style="color: rgba(0, 0, 255, 1)">this</span>,<span style="color: rgba(0, 0, 255, 1)">this</span>.state.cdata)}>确定</button>
         </div>
<span style="color: rgba(0, 0, 0, 1)">    )
}

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">点击子组件时，定义一个方法，调用父组件传过来的方法，把子组件数据传入到这个方法里</span>
<span style="color: rgba(0, 0, 0, 1)"> trans(data){
   </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.props.content(data)
}
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Child;</pre>
</div>
<p> </p>
<p>父组件App.js</p>
<div class="cnblogs_code">
<pre>import React, { Component } from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import Child from </span>'./Child'<span style="color: rgba(0, 0, 0, 1)">
class App extends Component{
constructor(props){
super(props)
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.state =<span style="color: rgba(0, 0, 0, 1)"> {
   pdata:</span>"父组件数据"<span style="color: rgba(0, 0, 0, 1)">
}
}
render(){
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">(
   </span><div><span style="color: rgba(0, 0, 0, 1)">
   {</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 传递一个方法给子组件 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">}
   </span><Child content={<span style="color: rgba(0, 0, 255, 1)">this</span>.getValue.bind(<span style="color: rgba(0, 0, 255, 1)">this</span>)}></Child>
   {<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.state.pdata}
   </span></div>
<span style="color: rgba(0, 0, 0, 1)"> )
}

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在方法里传入一个参数，val就是子组件传过来的数据</span>
<span style="color: rgba(0, 0, 0, 1)">getValue(val){
</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.setState({
   pdata:val
})
}
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> App;</pre>
</div>
<p> </p>
<p> </p>
<p>使用箭头函数的写法</p>
<p>子组件：</p>
<div class="cnblogs_code">
<pre>import React, { Component } from 'react'<span style="color: rgba(0, 0, 0, 1)">;
class Child extends Component {
constructor(props) {
   super(props);
   </span><span style="color: rgba(0, 0, 255, 1)">this</span>.state =<span style="color: rgba(0, 0, 0, 1)"> {
         cdata:</span>"子数据"<span style="color: rgba(0, 0, 0, 1)">
      }
}
render() {
   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
         </span><div><span style="color: rgba(0, 0, 0, 1)">
            子组件
            </span><button onClick={()=><span style="color: rgba(0, 0, 255, 1)">this</span>.transValue(<span style="color: rgba(0, 0, 255, 1)">this</span>.state.cdata)}>传递数据</button>
         </div>
<span style="color: rgba(0, 0, 0, 1)">       );
}
transValue(val){
   console.log(val);

   </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.props.content(val)
}
}

export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Child;</pre>
</div>
<p> </p>
<p>父组件</p>
<div class="cnblogs_code">
<pre>import React, { Component } from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import Child from </span>'./Child'<span style="color: rgba(0, 0, 0, 1)">
class App extends Component {
constructor(props) {
super(props);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.state =<span style="color: rgba(0, 0, 0, 1)"> {
   pdata:</span>"父数据"<span style="color: rgba(0, 0, 0, 1)">
   }
}
render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
   </span><div><span style="color: rgba(0, 0, 0, 1)">
   {</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.state.pdata}
   {</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 这个方法要传入参数 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">}
   </span><Child content={(val)=><span style="color: rgba(0, 0, 255, 1)">this</span>.giveMeth(val)}></Child>
   </div>
<span style="color: rgba(0, 0, 0, 1)"> );
}
giveMeth(val){
console.log(val);

}
}

export </span><span style="color: rgba(0, 0, 255, 1)">default</span> App;</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/luguankun/p/11073688.html

頁: [1]

查看完整版本: react子传父