Question

我有3个组件。它们是父布局，选择框和面板，它从某些数据生成x次。

<Layout>
 <Dropdown>
 <Panel>
 <Panel>
 <Panel>

我试图这样做，当选择值改变时，每个面板的内容都会改变。通过在新选择值和存储在面板组件中的数据之间进行一些数学运算来进行更改。每个面板都有不同的数据。

Layout.js

updateTrueCost(selected){
 this.refs.panel.setTrueCost
}

render(){
    return (
        <div>
            <div class="row">
                Show me the true cost in
                <CurrencyDrop currencyChange = {(e) => this.updateTrueCost(e)} data = {this.state.data} />
            </div>

            <div class="row">
            {this.state.data.map((item, index) => (
                <Panel ref="panel" key = {index} paneldata= {item} />
            ))}                 
            </div>
        </div>
    );
}

Panel.js

setTrueCost(selected){
 //Do some math
 this.setState({truecost: mathresult})
}

render(){
  return(
     <div>
      {this.state.truecost}
     </div>
  )
}

CurrencyDrop.js

onHandelChange(e){
    this.props.currencyChange(e);
}

render(){
   return(
    <Select
     onChange={this.onHandelChange.bind(this)}
     options={options} />
   )
}

当选择更改时，当前结果仅是最后一次面板更新。我猜我在使用ref处理时遇到了问题，但我不能搜索正确的术语，因为我找不到任何相关的问题。

Answer 1

使用React内置生命周期方法，而不是调用ref的方法。

class Panel extends React.Component {
    componentWillReceiveProps (newProps) {
        // compare old and new data
        // make some magic if data updates
        if (this.props.panelData !== newProps.panelData) {
            this.setState({trueCost: someMath()});
        }
    }

    render () {
        return <div>{this.state.trueCost}</div>
    }
}

然后只需更改输入道具，所有数据都将自动更新。

为所有子组件调用函数

1 个答案: