Как добавить номер телефона-ответа в -react-final-форму?

Question

В настоящее время я создаю форму с использованием react-final-form и пытаюсь использовать react-phone-number-input с ней через интеграцию в качестве адаптера, как показано в в этом примере .

Я попыталсяиспользуйте пример, чтобы узнать, как это сделать, но я не уверен, как получить доступ к компоненту и правильно создать для него адаптер.

<code>import React from 'react';
import { Form, Field } from 'react-final-form';
import PhoneInput from 'react-phone-number-input';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const onSubmit = async values => {
  await sleep(300)
  window.alert(JSON.stringify(values, 0, 2))
}

const PhoneAdapter = ({ input, meta, ...rest }) => (
    <PhoneInput
    {...input}
    {...rest}
    value={input.value}
    onChange={(event, value) => input.onChange(value)}
  />
  )

class ContactForm extends React.Component {
    render() {
        return (
            <>
            <Form
              onSubmit={onSubmit}
              initialValues={{ }}
              render={({ handleSubmit, form, submitting, pristine, values }) => (
                <form onSubmit={handleSubmit}>
                  <fieldset>
                  <Field component={PhoneAdapter} />
                  </fieldset>
                  <fieldset>
                    <button type="submit" disabled={submitting || pristine}>
                      Submit
                    </button>
                  </fieldset>
                  <pre>{JSON.stringify(values, 0, 2)}

)} />);}} экспорт по умолчанию ContactForm;

Answer 1

Обновление: июль 2019

Очевидно, все, что вам нужно сделать, это распространить свойство ввода поля.Работает без нареканий.Узнайте о распространении, если вы не знакомы с ним.

const PhoneAdapter = ({ input }) => (
    <PhoneInput {...input} />
)

<Field name="phone" placeholder="Enter phone number" component={PhoneAdapter} />

---

Я закончил экспериментировать с реквизитом FieldRenderProps, пока он не сработал.Я не был уверен, будет ли это работать или нет, так как react-phone-number-input - это два элемента в компоненте.Я думал, что он будет реализовывать вход только на одном из элементов.

Используя input, я получаю доступ к реквизитам входа.Поэтому я вызвал его значение, так как значение по умолчанию выглядит так:

<PhoneInput
  placeholder="Enter phone number"
  value={ this.state.value } // This is what I called.
  onChange={ value => this.setState({ value }) }/>

Затем я проделал то же самое для свойства onChange.

const PhoneAdapter = ({ input }) => (
    <PhoneInput value={input.value.value} onChange={value => input.onChange(value)} />
)

Наконец, я использовал компонентадаптер вот так:

<Field name="phone" placeholder="Enter phone number" component={PhoneAdapter} />