如何在反应中将状态值从父元素传递给子元素

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。

有谁知道我该怎么做？如果这些元素看起来很陌生，我也会使用 material 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,
});

输出可能与您预期的不同

如何在反应中将状态值从父元素传递给子元素

How to pass state value from parent element to child in react

javascript

reactjs

material-ui