Хранение данных поля формы в реакции

Question

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

class CancelSurvey extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      reasons: []
    }
    this.processData = this.processData.bind(this)
  }

  componentDidMount () {
    this.fetchContent(this.processData)
  }

  fetchContent (cb) {
    superagent
      .get('/api/endpoint')
      .then(cb)
  }

  processData (data) {
    this.setState({
      reasons: data.body
    })
  }

  setReason(event) {
    this.props.receiveReason(event.target.value);
  }

  render (props) {
    const content = this.props.config.contentStrings
    const reason = this.state.reasons.map((reason, i) => {
      return (
        <div className='fieldset__item' key={i} onChange={this.setReason.bind(this)}>
          <label>{reason.client_reason}</label>
          <input type='radio'
            id={reason.reason_id}
            value={reason.client_reason}
            name='reason' />
        </div>
      )
    })

    return (
      <div className='survey'>
        <h2 className='heading md'>heading</h2>
        <p className='subpara'>subheading</p>
        <form id='exit-survey'>
          <fieldset className='fieldset'>
            { reason }
            <label>Other reason not included above:</label>
            <input type='radio'
              id='other'
              value='other'
              name='reason' />
            <input className='valid'
              type='text'
              id='user[name]'
              name='user[name]'
              value='plaholder text' />
          </fieldset>
        <div className='footer-links'>
          <button href='/' className='btn btn--primary btn--lg'>cancel</button>
        </div>
        </form>
      </div>
    )
  }
}

export default CancelSurvey

Answer 1

Вам необходимо указать реквизит, например this.props.reason, и указать его в качестве причины при отправке формы.

Затем в родительском компоненте используйте (reason) => this.setState({reason}) в качестве обработчика, например onSubmit.

ПРИМЕР ---

в родительском

<CancelSurvey 
receiveReason={ (reason) => this.setState({reason}) } 
/>

в компоненте

setReason(event) {
    this.props.receiveReason(event.target.value);
}

Что позволит вам передать новый объект состояния reason другому компоненту.

РЕДАКТИРОВАТЬ ---

Вот codepen , который я создал, используя ваш код, я закомментировал некоторые функции и код, которые могли бы вызвать ошибку на codepen, если вы скопируете и вставите кодовую ручку, пожалуйста, не забудьте отрегулировать это обратно.

Вы можете видеть, что я использую состояние для обработки значений и состояния входов. Я создал новую кнопку, которая вызывает setReason и консоль регистрирует причину, которую выбрал пользователь. Чтобы получить это в родительском компоненте, вам просто нужно раскомментировать receiveReason вызов.