Question

如果有一个具有多个单选按钮的反应表单和仅在选择other选项单选按钮时可见的文本输入，我目前已禁用提交按钮，直到选中单选按钮。但是，如果选择了other选项，即使输入字段中没有与之关联的文本，提交按钮仍然有效。当且仅当选择了其他选项时，如何检查输入框的长度？

class CancelSurvey extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      reasons: [],
      reason: {},
      otherReasonText: undefined,
      submitting: false
    }
    this.processData = this.processData.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.setReason = this.setReason.bind(this)
    this.setOtherReasonText = this.setOtherReasonText.bind(this)
    this.otherReason = {
      reason_id: 70,
      client_reason: 'other'
    }
  }

  componentDidMount () {
    this.fetchSurvey()
  }

  /**
   * Fetch reasons
   */
  fetchSurvey (cb) {
    superagent
      .get('/api/user/survey')
      .then(this.processData)
  }

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

  async handleSubmit (e) {
    e.preventDefault()

    await this.setState({ submitting: true })

    const { reason, otherReasonText } = this.state

    superagent
      .post('/api/user/survey')
      .send({
        optionId: reason.reason_id,
        optionText: reason.client_reason,
        otherReasonText
      })
      .then(async (data) => {
        await this.setState({ submitting: false })

        if (data.body.success) {
          this.props.setStep(OFFER)
        }
      })
  }

  setOtherReasonText (e) {
    this.setState({ otherReasonText: e.target.value })
  }

  setReason (reason) {
    this.setState({ reason })
  }

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

    return (
      <div className='cancel-survey'>

        <form className='cancel-survey-form'>
          { reasons }

          <div className='form-row'>
            <input
              type='radio'
              id='other-option'
              name='reason'
              onChange={() => this.setReason(this.otherReason)} />
            <label htmlFor='other-option'>
              Other reason
            </label>
          </div>

          { this.state.reason.reason_id === 70 &&
            <div>
              <input
                className='valid'
                type='text'
                id='other-option'
                name='other-text'
                placeholder="placeholder"
                onChange={this.setOtherReasonText} />
            </div>
          }

          <div className='button-row'>
            <button
              disabled={!this.state.reason.client_reason}
              className={btnClassList}
              onClick={this.handleSubmit}>
              <span>Submit</span>
            </button>
          </div>
        </form>
      </div>
    )
  }
}

export default CancelSurvey

Answer 1

disabled={
  !this.state.reason.client_reason 
     || 
  (this.state.reason.client_reason === 'other' && !this.state.otherReasonText)
}

如果您想确保otherReasonText不仅仅是空格，请使用otherReasonText: ''作为初始状态，然后选中!this.state.otherReasonText.trim()。

Answer 2

之前做一些条件逻辑：

const reasonId = this.state.reason.reason_id;
const otherReasonText = this.state.otherReasonText;
const clientReason = this.state.reason.client_reason;

const shouldDisableButton = !clientReason || (reasonId === 70 && otherReasonText.length === 0)

 ...
 <div className='button-row'>
    <button
      disabled={shouldDisableButton}
      className={btnClassList}
      onClick={this.handleSubmit}>
      <span>Submit</span>
    </button>
 </div>

如果单选按钮和文本输入均为空白，请禁用提交按钮

2 个答案: