react-useForm

const App: React.FC = () => {
  const { form, updateValue, getFormData } = useForm({
    input1: {
      type: FormDataType.text,
      value: '1'
    },
    input2: {
      type: FormDataType.text,
      value: '2'
    },
    radio1: {
      type: FormDataType.radio,
      value: 'o1',
      options: [
        { label: '选项1', value: 'o1' },
        { label: '选项2', value: 'o2' }
      ]
    },
    select1: {
      type: FormDataType.select,
      value: '',
      options: [
        { label: '请选择', value: '' },
        { label: '选项1', value: 's1' },
        { label: '选项2', value: 's2' }
      ]
    }
  }, {
    input1 (value) {
      // 每次 input1 改变触发回调
      // 可用于依赖 input1 值触发改变的逻辑
      console.log('valuechange', value)
    }
  })

  console.log('/// render ///')

  const submit = useCallback(() => {
    // 获取表单当前值
    console.log(getFormData())
  }, [])

  return (
    <>
      <p>
        <input
          type="text"
          value={ form.input1.value }
          onChange={({ target }) => updateValue('input1', target.value) }/>
      </p>
      <p>
        <input
          type="text"
          value={ form.input2.value }
          onChange={({ target }) => updateValue('input2', target.value) }
          />
      </p>
      <p>
        {
          form.radio1.options.map(item => {
            const key = `${item.label}-${item.value}`
            return (
              <span key={ key }>
                <input
                  type="radio"
                  id={ key }
                  value={ item.value }
                  checked={ item.value === form.radio1.value }
                  onChange={ ({ target }) => updateValue('radio1', target.value) } />
                <label htmlFor={key}>{ item.label }</label>
              </span>
            )
          })
        }
      </p>
      <p>
        <select
          value={ form.select1.value }
          onChange={ ({ target }) => updateValue('select1', target.value) }>
          {
            form.select1.options.map(item => {
              const key = `${item.label}-${item.value}`
              return (
                <option key={key} value={item.value }>{ item.label }</option>
              )
            })
          }
        </select>
      </p>
      <p>
        <button onClick={ submit }>提交</button>
      </p>
    </>
  )
}