[React] 父组件中有一组子组件, 如何将子组件中操作得到的值传回父组件并进行排序

2018-07-08 03:14:11 546 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

weixin_39968394 墨衍会员 · AI 创作全网分发关注 + 加入社区

深入解析音频信号处理的核心算法——傅里叶变换、语音增强、回声消除与主动降噪本文系统介绍了现代音频信号处理的核心技术。首先阐述傅里叶变换作为理论基础的重要性，它能将声音分解为频域成分。随后重点分析三大关键技术：语音增强利用谱减法、维纳滤波和深度学习从噪声中提取人声；回声消除采用自适应滤波器消除通话中的回声；主动降噪通过声波干涉原理抵消环境噪声。文章最后指出，这些技术在实际应用中协同工作，形成完整的音频处理链路，共同提升语音质量和听觉体验。随着算法进步和算力提升，音频处理技术正向着更智能、更高效的方向发展。阅读详情

最近实习上遇到了一个问题，有点烦恼，一时实在想不出来。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里点击按钮。。。。。就有点搞不明白了

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

...全文

手把手教你用DaVinci Configurator配置AUTOSAR SWC接口（含RTE避坑指南）本文提供了一份基于DaVinci Configurator工具的AUTOSAR软件组件（SWC）接口配置实战指南。文章详细拆解了SR（发送者-接收者）和CS（客户端-服务器）接口的配置流程，并重点分享了运行时环境（RTE）生成阶段在多核部署、数据类型匹配等常见陷阱中的避坑方案与调试技巧，旨在帮助汽车电子工程师高效完成配置并规避错误。阅读详情

weixin_39968394

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

似梦飞花 2018-07-13

打赏
举报



class ProductCell extends PureComponent{

        constructor(props){

            super(props);

            this.state={

                value:'',

                isActive:false,

                fromParent:false

            }

            this.changeHandle=this.changeHandle.bind(this);

        }

        static getDerivedStateFromProps(nextProps,preState){

            if(preState.isActive){

                return {isActive:!preState.isActive,fromParent:true};

            }

            return null;

        }

        changeHandle(e){

            this.setState({value:e.target.value,isActive:true,fromParent:false});

        }

        render(){

            const {id,func}=this.props;

            if(this.state.fromParent){

                func(id,this.state.value);

            }

            return[

                <label>{id}</label>,

                <input value={this.state.value} onChange={this.changeHandle}/>

            ]

        }

    }

    class ProductTable extends Component{

        constructor(props){

            super(props);

            this.state={

                reRender:false

            }

            this.clickHandle=this.clickHandle.bind(this);

            this.showChange=this.showChange.bind(this);

        }

        clickHandle(){

            this.setState({reRender:true});

        }

        showChange(id,value){

            console.log(id,value);

        }

        render(){

            const arr=Array.from({length:this.props.length},(item,index)=>(<ProductCell func={this.showChange} key={index} id={index} />));

            arr.push(<input type={'button'} value={'save'} onClick={this.clickHandle} />);

            return arr;

        }

    }

    ReactDOM.render(<ProductTable length={10}/>,document.body);

这样试试

囧 2018-07-09

打赏
举报

table:
onInputChange = (id, order) => {
state保存
}

onButtonClick = (e) => {
取state保存的值
}

<ProductCell onInputChange={this.onInputChange}...>

cell:
onChange = (e) => {
取当前cell的id和填的值
this.props.onInputChange(id, order);
}

<input onChange={this.onChange}

大概这个思路吧

[React] 父组件中有一组子组件, 如何将子组件中操作得到的值传回父组件并进行排序

相关推荐