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

经过一些实验，结果证明解决方案只是调用onChange对象的field.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={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"/>
 }

将“自定义”组件调整为redux-forms？

1 个答案: