使“自定义”组件适应 redux-forms？答案

【问题标题】：Adapting a 'custom' component to redux-forms?使“自定义”组件适应 redux-forms？
【发布时间】：2017-03-07 23:57:39
【问题描述】：

是否可以将第三方组件适配为“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 配合得很好？

【问题讨论】：

标签： javascript reactjs redux-form

【解决方案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"/>
 }

【讨论】：