将“自定义”组件修改为redux-forms？

Question

是否可以将第三方组件修改为'redux-form'？

我想使用'react-phone-input'与redux-form，以便它匹配提供的字段的生命周期。

我曾尝试：

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

这将导致手机输入字段输入冻结第一个数字之后。使用ReactPhoneInput使它成为redux-form字段的一部分，但是消除了此元素的反应形式的好处。

有没有办法让一个适配器，这将有助于使这个组件与REDX形式发挥很好？

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