Question

单击按钮以更改另一个组件的状态值时，请更改状态值。让我用代码更好地解释

<div className="App-body">
   <PopularSelections value={this.state.selection}/>
</div>

和组件PopularSelections

export class PopularSelections extends React.Component {
    render (){
        return(
            <div className="PopularSelections">
                <button className={this.props.value === 'popular' ? "SelectionOn" : 'SelectionOff'}>Popular</button>
                <button className={this.props.value === 'upcoming' ? "SelectionOn" : 'SelectionOff'}>Upcoming</button>
            </div>
        )
    }
}

因此，当我在onClick的一个按钮中使用PopularSelections时，我更改了第一个组件的状态，在这种情况下，名为selection的变量可以更改吗？

Answer 1

您可以在父组件中具有一个可以更改状态的函数。

updateSelection = (value) => {
    this.setState({selection:value}, ()=>console.log(this.state.selection))
}

将此功能传递给子组件

<PopularSelections value={this.state.selection} updateSelection={this.updateSelection}/>

在子组件中，您可以调用该函数，

<button className={this.props.value === 'popular' ? "SelectionOn" : 'SelectionOff'} onClick={()=>this.props.updateSelection("popular")}>Popular</button>

<button className={this.props.value === 'upcoming' ? "SelectionOn" : 'SelectionOff'} onClick={()=>this.props.updateSelection("upcoming")}>Upcoming</button>

Demo

Answer 2

在父组件中创建一个函数：

until emails >= 500

将该函数作为道具传递给PopularSelections组件：

updateData=(data)=>{
    this.setState({selection:data})
}

现在在PopularSelections中：

<div className="App-body">
  <PopularSelections 
    value={this.state.selection}
    updateData={this.updateData}
   />
</div>

我可以从组件返回值以从另一个组件更改组件状态吗？

2 个答案: