e.target 为空，当我使用 setState 时

Question

I want to change my state, the user properties, when the you change the field on the form I want it to change the proper value on user.

我将函数传递给的元素是处理值并填充父组件中的状态。

例如：用户类型密码。我希望用户对象保持不变，但用户必须改变。

state = {
      signUp: true,
      user:{
        name: '',
        password: '',
        email: '',
        userName: ''
      }
    }

handleChange = e =>{        
    this.setState(prevState => ({
      user: {
        ...prevState.user,
       [e.target.name] : e.target.value
      }
    } 

    ));
  }



 export default function SignupForm({handleSignup, handleChange}) {
    return (
        <div>
            <div className='login-page__main__cadastro'>


            <h4>
                 Cadastre-se para ver<span className='br'><br></br></span> fotos e vídeos dos seus <span className='br'><br></br></span> amigos.
                 </h4> 

                 <form className='login-page__main__cadastro__form'>
                  <input className='form-cadastro-item' onChange={handleChange} name='email' type='email' placeholder='email'></input>
                  <input className='form-cadastro-item' onChange={handleChange} name='name' type='text' placeholder='Nome completo'></input>
                  <input className='form-cadastro-item' onChange={handleChange} name='userName' type='text' placeholder='Nome de usuário'></input>
                  <input className='form-cadastro-item' onChange={handleChange} name='password' type='password' placeholder='Senha'></input>

                 <button onClick={handleSignup} className='btn-primary'>
                 Cadastrar-se

                 </button>

                 </form>
            </div>
        </div>
    )
}

我收到一个错误：e.target 为空。

Answer 1

您应该将值保存到另一个变量，或者使用e.persist()：

handleChange = e =>{    
    let myName = e.target.name;
    let myValue = e.target.value;    
    this.setState(prevState => ({
        user: {
            ...prevState.user,
            [myName] : myValue
        }
    })); 
}

这是因为在 React 中出于性能原因使用 synthetic events。来自文档的 event pooling 部分：

SyntheticEvent 被合并。这意味着SyntheticEvent 对象将被重用，并且在调用事件回调后所有属性都将被取消。这是出于性能原因。因此，您不能以异步方式访问事件。