React回调注意事项

class Login extends React.Component {
    
    
      // 初始化状态
      state = {
    
    
        username: '',
        password: ''
      }
      
      // 保存表单数据到状态中
      saveFormData = (event) => {
    
    
        console.log(event)
      }

      // 表单提交
      handleSubmit = (event) => {
    
    
        event.preventDefault() // 阻止表单默认提交事件
        const {
    
     username, password } = this.state
        alert(`Your input username is ${
      
      username}, password is ${
      
      password}`)
      }
      render () {
    
    
        return (
          <form onSubmit={
    
    this.handleSubmit}>
            Username: <input onChange={
    
    this.saveFormData('username')} type="text" name="username" />
            Password: <input onChange={
    
    this.saveFormData('password')} type="text" name="password" />
            <button>Login</button>
          </form>
        )
      }
    }

这样写不对，因为这样写的意思是，把saveFormData('username')执行的返回值作为onChange的回调。
而saveFormData的返回值是undefined:

如果要把saveFormData方法作为onChange的回调，就不能加括号执行这个函数：

这样就是把saveFormData方法交给react作为input标签触发onChange方法的回调

或者还可以这样写，为了避免把undefined指派给onChange作为回调函数，可以返回一个回调函数：