是否可以将数字存储为形式值

Question

我正试图键入一个数字字段：

<Form
onSubmit={onSubmit}
initialValues={{ target_type_id: 1 }}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<Field<number> name="target_type_id" type="radio" value={1}>
{({ input }) => (
<label>
<input {...input} /> Alert
</label>
)}
</Field>
<Field<number> name="target_type_id" type="radio" value={2}>
{({ input }) => (
<label>
<input {...input} /> Lookout
</label>
)}
</Field>
<Field<number> name="target_type_id" type="radio" value={3}>
{({ input }) => (
<label>
<input {...input} /> Target
</label>
)}
</Field>
<Field<number> name="target_type_id" type="radio" value={4}>
{({ input }) => (
<label>
<input {...input} /> Blitz
</label>
)}
</Field>
<pre style={{ flexGrow: 1 }}>
{JSON.stringify(values, undefined, 2)}
</pre>
</form>
)}
/>

但是，当我单击单选按钮时，捕获的值是一个字符串，因此它永远不会与Field中指定的数值匹配

有什么方法可以将值捕获为字符串以外的数据类型？

https://codesandbox.io/s/strongly-typed-form-values-with-react-final-form-forked-cvn4t?file=/src/index.tsx:918-2141

Answer 1

从事件中获取值并将其转换为数字。

<Field<number> name="target_type_id" type="radio" value={3}>
{({ input }) => (
<label>
<input {...input} onChange={(e) => input.onChange(Number(e.target.value))} /> Target
</label>
)}
</Field>