React Bootstrap Validation sử dụng đầu vào được xác thực trong thành phần phụ

Question

Tôi đang sử dụng react-bootstrap-validation để trang trí thẻ đầu vào phản ứng-bootstrap.

ValidatedInput yêu cầu rằng nó nằm bên trong thành phần Biểu mẫu. Khi tôi thêm ValidatedInput vào một thành phần phụ tùy chỉnh, tôi nhận được một lỗi nói rằng nó cần phải ở bên trong một Form mà nó đang có, nhưng tôi đoán nó là tiếp tục xuống cây ngay bây giờ để không thể nhìn thấy Form.

Có cách nào tham chiếu Biểu mẫu gốc để ValidatedInput có thể nhìn thấy cha mẹ hay không.

Nhìn vào nguồn của lib Xác thực, tôi có thể thấy rằng ValidationInput cần đăng ký Biểu mẫu nhưng không chắc chắn cách thực hiện điều này từ thành phần phụ.

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

Sa @ Ваня Решетников đã nói ở trên không thể làm điều đó ngay bây giờ do giới hạn của thiết kế hiện tại. Một giải pháp tôi đã đi là điều này.

1. Chuyển đổi tiểu hợp phần cho đối tượng JS đồng bằng

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

2. Thêm đối tượng mới như một mixin để cha mẹ và đưa ra một hàm

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

Answer 2

Tại thời điểm này là không thể làm. Nó sẽ có thể trong một bản phát hành trong tương lai khi chúng ta nhận được bối cảnh thích hợp dựa trên cha mẹ trong phản ứng và tôi sẽ di chuyển thành phần này đến các ngữ cảnh. Nhưng bây giờ tôi khuyên bạn nên tách phương thức render() của bạn thành một vài phương thức nhỏ hơn và tái sử dụng chúng.