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出错的函数和代码，如果您复制并粘贴codepen请记得将其调整回来

您可以看到我正在使用状态来处理输入的值和状态。我创建了一个新按钮，调用setReason并控制台记录用户选择的原因。要在父组件中接收此内容，您只需取消注释receiveReason电话。

将表单字段数据存储在响应中

1 个答案: