將「自定義」組件修改爲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"/> 
}