如何在React中將狀態值從父元素傳遞給子元素

Question

在我的代碼中，我有一個選項卡菜單，我想使用一個按鈕在這些選項卡之間切換。 我想將這些選項卡的值傳遞給按鈕的onclick函數，以便它可以在選項卡之間導航。

例如：

<Tabs value={this.state.value} onChange={this._handleChange}>
     <Tab label="1" value={1}>
         <RaisedButton label="Next" onTouchTap={this._handleChange} />
     </Tab>
     <Tab label="2" value={2}>
         <RaisedButton label="Next" onTouchTap={this._handleChange} />
     </Tab>
     <Tab label="3" value={3}>
         <RaisedButton label="Next" onTouchTap={this._handleChange} />
     </Tab>
</Tabs>

我的_handleChange函數只是將狀態設置為下一個選項卡的值

_handleChange: function(value) {
    this.setState({
      value: value,
    });
    console.log(this.state);
  }

我需要以某種方式從主選項卡元素中將onTouchTap事件與onChange事件鏈接起來，但是我不確定如何做到這一點。 我的主要目標是在三個可用選項卡之間導航：單擊tab1上的下一個按鈕時，它將轉換為tab2，然后轉換為tab3，最后返回至tab1。

有誰知道我能做到這一點嗎？ 如果這些元素看起來很陌生，我還將使用材料UI。

Answer 1

您可以這樣做：

<Tabs value={this.state.value} onChange={this._handleChange}>
     <Tab label="1" value={1}>
         <RaisedButton label="Next" onTouchTap={this._handleChange.bind(this, 2)} />
     </Tab>
     <Tab label="2" value={2}>
         <RaisedButton label="Next" onTouchTap={this._handleChange.bind(this, 3)} />
     </Tab>
     <Tab label="3" value={3}>
         <RaisedButton label="Next" onTouchTap={this._handleChange.bind(this, 1)} />
     </Tab>
</Tabs>

Answer 2

盡管siu答案是正確的，但要注意setState（）是異步調用，

您的console.log之后

this.setState({
  value: value,
});

可能會按您的預期輸出不同