javascript - 将 'custom' 组件改编为 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 字段的一部分是可行的，但会消除此元素的 React-form 的优势。

有没有办法制作一个适配器来帮助这个组件与 redux-form 很好地配合？

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