react怎么控制input标签disabled的值

Question

const CloseAccount = React.memo(() => { 
  const submit = () => {
    console.log('....')
  }
  const canSubmit = (event:any) => {
    if(event.target.type === 'text') {
      state.email = event.target.value 
    } else if (event.target.type === 'checkbox') {
      state.checkState = event.target.checked
    }
    console.log(!(state.email && state.checkState))
  }
  const state = {
    email: '',
    checkState: false,
  }
  return (
    <div className={styles.container}>

      <section className={styles.email}>
        <div className={styles.emailTips}>
          输入可用邮箱，获取注销结果
        </div>
        <input 
          className={styles.emailInput} 
          placeholder="*请输入你的邮箱"
          onChange={canSubmit}
          defaultValue={state.email}
        />
      </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={!(state.email && state.checkState)}>
          <span className={styles.submitWord}>申请注销</span>
        </button>
      </section>
    </div>
  )

  
})

CloseAccount.displayName = 'CloseAccount'

export default CloseAccount

逻辑是刚开始的时候button是disabled的，当用户输入了邮箱和勾选了同意后才可以点击按钮。我这样写button的disabled的值不会变，请问我的代码哪里需要改正

Answer 1

去看看hooks的useState方法可以触发组件更新，你这样写组件没法更新，所以不会生效。

Answer 2

react的state不能直接赋值改变，setState改变state

Answer 3

state 值的改变需要通过 setState() 方法去改变才能达到重新渲染的效果 你这样state.email = event.target.value 是无效的

修改：

this.setState({
    email:event.target.value
});

this.setState({
    checkState:event.target.checked
});

<button className={styles.submitButton} onClick={submit} disabled={!(ths.state.email && this.state.checkState)}>
  <span className={styles.submitWord}>申请注销</span>
</button>

Answer 4

不知道楼上都在说啥= =... 哪里来的this.setState = =... 题主先了解下什么时候该用memo吧... 你在这里state是肯定触发不了render的... 就算在其他任何class类组件里也是不行的...

Answer 5

感谢邀请。这里 我想先说下react.memo的作用，react.memo 的作用类比于 class组件的pureComponent，用于函数组件的性能优化，避免不必要的render。
那么划上重点，memo 方法是用于函数组件的。
在react hooks之前的版本 函数组件，是没有本地state的。 在基于hooks之后，函数组件可以使用useState来保存，函数组件的本地状态。
基于上面的解释，我们来看下你的代码。

  const state = {
    email: '',
    checkState: false,
  }

这一段是你对函数组件 设置的一些本地状态。 那么我们简单的想一下流程 比如你输入内容了执行submit 然后执行你的canSubmit 代码。是的这里通过state.email = event.target.value 确实改变了 state.email的值，但是 你会发现组件没有任何变化。！！

所以这就是hooks出现的原因。 虽然你改变了state 但是组件并没有重新render。这才是你这段代码最大的问题。
如果要使用函数组件，并使用本地状态，那么请使用useState来保存的需要保存的本地状态。

具体代码我就不写了。你可以看下react hooks这部分内容，如果不熟悉 ，那么你可以依然使用class组件