Как передать значение состояния из родительского элемента в ответ

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 из элемента основных вкладок, но я не уверен, как это сделать. Моя главная цель - переключаться между тремя доступными вкладками: при нажатии следующей кнопки на вкладке 1 она переключается на вкладку 2, затем на вкладку 3 и, наконец, обратно на вкладку 1.

Кто-нибудь знает, как я могу это сделать? Я также использую пользовательский интерфейс материала, если эти элементы выглядят чужими.

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,
});

может выводить иначе, чем вы ожидали