react怎么实时获取input的值

Question

const CloseAccount = React.memo(() => { 
  const [disabled, setDisabled] = useState(true);
  const [buttonColor, setButtonColor] = useState({'backgroundColor': 'rgba(0, 0, 0, 0.1)'})
  const [email,setEmail] = useState('')
  const [checkState, setCheckState] = useState(false)
  const submit = async () => {
    const obj = {
      email: email
    }
    const { data } = await http.post('/user/close/account',obj)
  }
  const canSubmit = (event:any) => {
    if(event.target.type === 'text') {
      setEmail(event.target.value)
    } else if (event.target.type === 'checkbox') {
      setCheckState(event.target.checked)
    }
    if(email && checkState) {
      setDisabled(false)
      setButtonColor({'backgroundColor': '#fe5353'})
    } else {
      setDisabled(true)
      setButtonColor({'backgroundColor': 'rgba(0, 0, 0, 0.1)'})
    }
  }
  return (
    <div className={styles.container}>

      <section className={styles.email}>
        <div className={styles.emailTips}>
          输入可用邮箱，获取注销结果
        </div>
        <input 
          className={styles.emailInput} 
          placeholder="*请输入你的邮箱"
          onChange={canSubmit}
        />
      </section>

      <section className={styles.agree}>
        <input 
          type="checkbox" 
          className={styles.agreeCheck} 
          onChange={canSubmit}
        />
        <label className={styles.agreeLabel}>我已阅读并同意<a>“账户注销须知”</a></label>
      </section>

      <section className={styles.submit}>
        <button 
          className={styles.submitButton} 
          onClick={submit} 
          disabled={disabled}
          style={buttonColor}
        >
          <span className={styles.submitWord}>申请注销</span>
        </button>
      </section>
    </div>
  )
})

CloseAccount.displayName = 'CloseAccount'

export default CloseAccount

这段代码的逻辑就是监听input和checkbox，当input和checkbox都有值时才能点击按钮，可是我这样写onChange里面拿到的是input和checkbox上一次的值，请问要怎么改啊

Answer 1

可以给 input 设置 value 属性嘛？受控组件的处理方式会比较方便。然后提交表单的时候，校验state中的值是否合法
简单的表单需求，可以自己封装一个useForm这是思路：https://upmostly.com/tutorial...

这周晚些我会翻译下这篇文章