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

Question

我正在使用react-bootstrap-validation来装饰react-bootstrap Input标签.

ValidatedInput要求它在Form组件中.当我将ValidatedInput添加到自定义子组件时,我得到一个错误,说它需要在Form中,但我想它现在在树的下方,所以无法看到Form.

有没有办法引用父窗体,以便ValidatedInput可以看到父窗体.

查看验证库的来源我可以看到ValidationInput需要注册到Form但不知道如何从子组件执行此操作.

// 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

萨 @\xd0\x92\xd0\xb0\xd0\xbd\xd1\x8f \xd0\xa0\xd0\xb5\xd1\x88\xd0\xb5\xd1\x82\xd0\xbd\xd0\xb8\xd0\xba \xd0\xbe\xd0\xb2 上面说过，由于当前设计的限制，现在不可能做到这一点。我寻求的解决方案是这样的。

\n\n

\n

1. 将子组件转换为普通 JS 对象

   \n\n

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

\n

2. 将新对象作为 mixin 添加到父对象并渲染函数

   \n\n

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

\n

\n