Reactjs 如何将react电话号码输入添加到react最终表单？

我目前正在使用

react final form

创建一个表单，并尝试将

react phone number input

与它集成为适配器，如中所示

我试图使用这个示例来了解它是如何完成的，但我不确定如何访问该组件并为其正确创建适配器

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)}</pre>
                </form>
              )}
            />
            </>
        );
    }
}

export default ContactForm;

从“React”导入React；
从“react final Form”导入{Form，Field}；
从“反应电话号码输入”导入电话输入；
const sleep=ms=>newpromise（解析=>setTimeout（解析，ms））
const onSubmit=异步值=>{
等待睡眠（300）
alert（JSON.stringify（值0,2））
}
常量PhoneAdapter=（{input，meta，…rest}）=>(
input.onChange（值）}
/>
)
类ContactForm扩展了React.Component{
render（）{
返回(
(
提交
{JSON.stringify（值，0，2）}
)}
/>
);
}
}
导出默认联系人表单；

更新日期：2019年7月

显然，您需要做的就是扩展字段的输入属性。工作完美无瑕。如果您不熟悉传播，请了解它

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

然后我对onChange函数prop做了同样的操作

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

constphoneadapter=（{input}）=>(
input.onChange（值）}/>
)

最后，我使用了组件适配器，如下所示：

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

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