React Bootstrap 验证在子组件中使用经过验证的输入

Question

我正在使用 react-bootstrap-validation 修饰 react-bootstrap 输入标签。

ValidatedInput 要求它位于 Form 组件内。当我将我的 ValidatedInput 添加到自定义子组件时，我收到一条错误消息，指出它需要位于它所在的表单内，但我猜它现在位于树的更下方，因此看不到表单。

有没有一种方法可以引用父表单，以便 ValidatedInput 可以看到父表单。

查看验证库的源代码，我可以看到 ValidationInput 需要注册到表单，但我不确定如何从子组件执行此操作。

// Parent render 
render(){
   <Form
   className="fl-form fl-form-inline fl-form-large"
   name="customer-details"
   onValidSubmit={this._handleValidSubmit}
   onInvalidSubmit={this._handleInvalidSubmit}
   validationEvent='onChange'>
    
     <TitleSelect handleChange={this.updateDropDown} value={this.state.form.title} />
     
   </form>
}


// Sub class containing the ValidatedInput
export class TitleSelect extends React.Component {

    static propTypes = {
      handleChange: React.PropTypes.func.isRequired,
      value: React.PropTypes.string.isRequired
    }

    render(){

        return (
          <ValidatedInput
            name="title"
            label='title'
            type='select'
            value={this.props.value}
            onChange={this.props.handleChange}
            groupClassName='form-group input-title'
            wrapperClassName='fl-input-wrapper'
            validate='required'
            errorHelp={{
              required: 'Please select a title.'
            }}>

            <option value="" ></option>
            <option value="Mr">Mr</option>
            <option value="Mrs">Mrs</option>
            <option value="Master">Mstr.</option>
            <option value="Ms">Ms</option>
            <option value="Miss">Miss</option>
            <option value="Reverend">Rev.</option>
            <option value="Doctor">Dr.</option>
            <option value="Professor">Prof.</option>
            <option value="Lord">Lord</option>
            <option value="Lady">Lady</option>
            <option value="Sir">Sir</option>
            <option value="Master">Mstr.</option>
            <option value="Miss">Miss</option>
          </ValidatedInput>
        )
    }
};

Answer 1

目前这是不可能的。一旦我们在 React 中获得适当的基于父级的上下文，这将在未来的版本中成为可能，我会将组件迁移到上下文。但现在我建议将您的 render() 方法拆分为几个较小的方法并重新使用它们。

Answer 2

Sa @Ваня Решетников 上面说由于当前设计的限制，现在不可能这样做。我寻求的解决方案是这个。

将子组件转换为纯 JS 对象

TitleSelect = {
  // move prop types to parent
  renderTitleSelect(){
    ...
  }
}

将新对象作为 mixin 添加到父对象并呈现函数

mixins: [TitleSelect],
...
render() {
  <Form ...>
    // parentheses are important!
    {this.renderTitleSelect()}
  </Form>
}

React Bootstrap 验证在子组件中使用经过验证的输入

React Bootstrap Validation use validated input in sub component

reactjs

react-bootstrap