React Bootstrap Validation использует проверенный вход в подкомпонент

Я использую react-bootstrap-validation, который украшает тег Input-bootstrap Input.

ValidatedInput требует, чтобы он находился внутри компонента Form. Когда я добавляю свой ValidatedInput к настраиваемому подкомпоненту, я получаю сообщение об ошибке, указывающее, что он должен находиться внутри Формы, какой он есть, но я думаю, что он теперь находится ниже дерева, поэтому не может видеть форму.

Есть ли способ ссылки на родительскую форму, чтобы ValidatedInput мог видеть родителя.

Глядя на источник библиотеки Validation, я вижу, что 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>
        )
    }
};

Ответ 1

Sa @Ваня Решетников сказал выше, что это невозможно сделать из-за ограничений текущего дизайна. Решением, на которое я пошел, является это.

Преобразование подкомпонента в простой объект JS
```
TitleSelect = {
  // move prop types to parent
  renderTitleSelect(){
    ...
  }
}
```

Добавить новый объект как mixin для родителя и выполнить функцию

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

Ответ 2

На данный момент это невозможно сделать. Это будет возможно в будущей версии, когда мы получим правильные контексты, основанные на родителях, и я перенесу компонент в контексты. Но сейчас я бы рекомендовал разделить ваш метод render() на пару меньших и повторно использовать их.