Реагировать - передать переменную другому компоненту

Question

У меня есть родительско-дочерние отношения для компонента, который я пытаюсь настроить. Мне бы хотелось, чтобы родитель оставил информацию об исходном состоянии транзакции (компонент React), а затем определял, разрешать ли добавление новых транзакций, основываясь на том, меньше ли это первоначальная сумма. Я не знаю, как правильно передавать данные от компонента к компоненту при нажатии кнопки. Мой оригинальный компонент указан ниже. Пожалуйста, пришлите помощь!

`` `

    var transaction = React.createClass({
      getInitialState: function(){
        return {
          transactions: [ { desc: '', val: 0 } ],
          initialTransaction: 10
        }
      },
      render: function(){
        return (
          <div>
           { this.state.transactions.map(this.renderChild) }
            <button onClick={ this.newTransaction }>Add</button>
          </div>
        )
      },
      shouldComponentUpdate: function(nextProps, nextState) {
        console.log(nextState.transactions);
        return nextState.transactions.reduce(function(a, b) {
          return { val: a.val + b.val}
        }) == this.state.initialTransaction
      },
      newTransaction: function(_transaction,x,y){
        this.state.transactions.push(_transaction);

        this.setState({
          transactions: this.state.transactions
        });
        this.forceUpdate();
      },
      renderChild: function(_transaction){
        return (
          <div>
          <input type='text' defaultValue={ _transaction.desc } />
          <input type='text' defaultValue={ _transaction.val }/>
          // TODO: this button should pass a transaction up to the parent component
          </div>
        );
      }
    });
   React.renderComponent(<transaction />, document.getElementById('mount-point'));

`` `

Answer 1

Вы можете пройти обратный звонок.

В родительском:

onTransaction: function(transaction) {
  console.log('onTransaction', transaction);
}

И передайте его дочернему элементу:

<Transaction onTransaction={this.onTransaction} ... />

В ребенке вы можете вызвать этот метод через this.props.onTransaction:

renderChild: function(_transaction) {
  ...
  <button onClick={() => this.props.onTransaction(_transaction)} />