React求问。父组件中有一组子组件, 如何通过点击父组件的按钮,将子组件中操作得到的值传回父组件。

新手上路,请多包涵

clipboard.png

最近实习上遇到了一个问题,有点烦恼,一时实在想不出来。React新人,想来论坛问问大神们的想法,
是这样的,我现在有一个product table,table里面有一个接口可以得到数据,数据是一组些商品的id和相关信息,这个数据一直在变所以这些商品的个数也是变化的。
我就把商品数据 传进子组件product cell里,product.map(product => <ProductCell product={product} />这样来展现这个product table。
现在我需要在商品框product cell里有一个input小框,用来填数字,然后product table里有一个按钮,我一点击这个按钮,我就希望在table里面能得到这些商品所输入的数字和其对应的id,有了这样的一组数组ARRAY<order:Int, id: string>我就可以实现在table里面进行排序,然后把排完序的array用另一个api去save排序的信息。

我的问题是:如何在table里面得到product cell里数字的信息呢?我知道通过props里设值call back让一个子组件向父组件里传信息,但是现在有多个子组件,总个数还不确定,而且得到这些信息的触发条件在于是否在table里点击按钮。。。。。就有点搞不明白了

如果有人帅心善的大神愿意指教,十分感谢~

阅读 3.6k
3 个回答

知道通过props设置callback取得数据那就把所有数据都保存在父组件的state中,然后子组件只要改变,就动态的修改父组件里的state值,最后父组件提交的时候只需要拿自己state中的值就好了。
大体思路就是:子组件的所有数据来源都是父组件的state,包括input,这样在input修改的时候,触发onChange方法,去改变父组件中的state,最终提交的时候只需要父组件读取自己的state即可

楼上回答的正解,一句话:通过props传递函数,子组件调用该函数来达到传值目的。

比如:

 <div>
    <Child callback={this.callback}/>
 </div>

 callback=(params)=>{
   //在这里获取的params就是子组件调用callback传过来的值
 }

技术层面,楼上两位已经回答了,我认为 思路需要变一下,子组件的值改变后,就应当顺手传给父组件了,父组件再点按钮只需处理现有的数据即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题