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

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

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

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

Хотя Сиу ответ правильный, только отметить, что SetState() представляет собой асинхронный вызов,

ваш console.log сразу после

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

может выводиться по-другому, как вы ожидали