redux-formsに 'カスタム'コンポーネントを適用しますか？

Question

サードパーティのコンポーネントを 'redux-form'に適合させることは可能ですか？

redux-formで 'react-phone-input'を使用して、提供されたフィールドのライフサイクルと一致するようにします。

私が試してみました：

renderPhone({value, input, label, type, id, meta: { touched, error } }) { // Define stateless component to render input and errors 
    id = id || input.name; 

    return <div className="form-group"> 
     <label htmlFor={id}>{label}:</label> 
     <ReactPhoneInput defaultCountry={'ca'} onChange={this.handleMyChange}/>    
     {touched && error && <div className="error bg-warning x">{field.meta.error}</div>} 
    </div> 
} 

handleChange(value) { 
    this.setState({ 
     phone: phone 
    }); 
} 

render() { 
    <Field 
     className="form-control" 
     label="Phone number" 
     name="phone" 
     component={this.renderPhone} 
     type="phone"/> 
} 

これは最初の桁を入力した後、凍結電話の入力フィールドになります。 RexPhoneInputをredux-formフィールドの一部として使用すると、この要素の反応形式の利点はなくなります。

このコンポーネントをreduxフォームでうまく再生するのに役立つアダプタを作成する方法はありますか？実験のビットの後

Answer 1

、その溶液はfield.inputオブジェクトのonChange機能を呼び出すために、単純であるが判明：

renderPhone({value, input, label, type, id, meta: { touched, error } }) { // Define stateless component to render input and errors 
    id = id || input.name; 

    return <div className="form-group"> 
     <label htmlFor={id}>{label}:</label> 
     <ReactPhoneInput defaultCountry={'ca'} onChange={input.onChange}/>    
     {touched && error && <div className="error bg-warning x">{error}</div>} 
    </div> 
} 

render() { 
    <Field 
     className="form-control" 
     label="Phone number" 
     name="phone" 
     component={this.renderPhone} 
     type="phone"/> 
}