Адаптировать «пользовательский» компонент к редукс-формам?

Можно ли адаптировать сторонний компонент к 'redux-form?

Я хотел бы использовать 'react-phone-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={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 с включением его в поле редукционной формы работает, но устраняет преимущества реактивной формы для этого элемента.

Есть ли способ сделать адаптер, который поможет этому компоненту хорошо работать с редукционной формой?


reactjs javascript redux-form
person Andre M    schedule 07.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

После небольшого эксперимента оказывается, что решение состоит в том, чтобы просто вызвать функцию 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"/>
 }
person Andre M    schedule 08.03.2017