reactjs - 是否可以将数字存储在表单值中？

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>