Значение event.Target равно null для формы реакции, использующей обработчики для обработки изменений - PullRequest
Новая
       3

Значение event.Target равно null для формы реакции, использующей обработчики для обработки изменений

1 голос
/ 05 марта 2020

Я пытаюсь учиться react hooks. это форма регистрации, которая хорошо работает при использовании классического компонента класса с внутренним состоянием и контролируемыми формами. но когда я пытаюсь использовать react hooks вот так и набрать на входе , он просто не отобразит то, что я печатаю .

Я зарегистрировал событие и понял, что проблема может заключаться в том, что целевое значение равно нулю. Может кто-нибудь объяснить мне, почему это может иметь место? 

const SignUp = props => {
  const [displayName, setDisplayName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const handleChange = e => {
    console.log(e);
    const { name, value } = e.target;
    switch (name) {
      case name === "displayName":
        setDisplayName(value);
      case name === "email":
        setEmail(value);
      case name === "password":
        setPassword(value);
      case name === "confirmPassword":
        setConfirmPassword(value);
    }
  };
  const handleSubmit = async e => {
    console.log(e);
    e.preventDefault();
    if (password !== confirmPassword) {
      alert("passwords do not match");
      return;
    }
    const { signUpStart } = props;
    signUpStart({ email, password, displayName });
  };

  return (
    <div className="sign-up-section">
      <form onSubmit={handleSubmit}>
        <FormInput
          type="text"
          name="displayName"
          handleChange={handleChange}
          value={displayName}
          label="display name"
        />
        <FormInput
          type="email"
          required
          name="email"
          value={email}
          handleChange={handleChange}
          label="email"
        />
        <FormInput
          type="password"
          name="password"
          handleChange={handleChange}
          value={password}
          label="password"
        />
        <FormInput
          type="psssword"
          name="confirmPassword"
          handleChange={handleChange}
          value={confirmPassword}
          label="comfirmPassword"
        />
        <Button type="submit" name="password" label="SIGN" />
      </form>
    </div>
  );
};


const FormInput =({label,handleChange, ...otherProps})=>{
    return <div className='group'>
        <input {...otherProps} onChange={handleChange} className='form-input'/>
        {
            label?(<label className={`${otherProps.value.length? 'shrink':''} form-input-label` }>{label}</label>):null
        }
    </div>
}

Ответы [ 3 ]

1 голос
/ 05 марта 2020

https://stackblitz.com/edit/react-form-hooks вы хотите установить setState для каждого изменения в поле ввода, поэтому функция обратного вызова onChange будет вызываться при каждом изменении поля ввода.

для функции обратного вызова регистр коммутатора должен выглядеть следующим образом: 

    switch(cond){
    case 'cond1':
                 execute;
                 break;
    }
0 голосов
/ 06 марта 2020

Как вы можете видеть ниже, проблема не в том, что e.target является нулевым или неопределенным. Проблема на самом деле в вашем заявлении переключателя.

Вы смешиваете синтаксис switch и if else здесь case name === "displayName":. Переключатель автоматически выполняет name == часть. В вашем случае все, что вам нужно сделать, это поставить то, что name должно быть равно, а не целое выражение.

Измените, как показано ниже, с правильными case и break после обновления состояния. 

const {useState, useEffect} = React;

const SignUp = props => {
  const [displayName, setDisplayName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const handleChange = e => {
    console.log(e.target.name); // Logs correctly
    console.log(e.target.value); // Logs correctly
    const { name, value } = e.target;
    switch (name) {
      case "displayName":
        setDisplayName(value);
        break;
      case "email":
        setEmail(value);
        break;
      case "password":
        setPassword(value);
        break;
      case "confirmPassword":
        setConfirmPassword(value);
        break;
    }
  };
  
  const handleSubmit = e => {
    console.log(e);
    e.preventDefault();
    if (password !== confirmPassword) {
      alert("passwords do not match");
      return;
    }
    const { signUpStart } = props;
    //signUpStart({ email, password, displayName });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <FormInput
          type="text"
          name="displayName"
          handleChange={handleChange}
          value={displayName}
          label="display name"
        />
        <FormInput
          type="email"
          required
          name="email"
          value={email}
          handleChange={handleChange}
          label="email"
        />
        <FormInput
          type="password"
          name="password"
          handleChange={handleChange}
          value={password}
          label="password"
        />
        <FormInput
          type="psssword"
          name="confirmPassword"
          handleChange={handleChange}
          value={confirmPassword}
          label="comfirmPassword"
        />
        <button type="submit" name="password">Sign</button>
      </form>
    </div>
  );
};


const FormInput = ({label,handleChange, ...otherProps}) => {
  return (
    <div>
      <input 
        {...otherProps} 
        onChange={handleChange} 
        className='form-input'
      />
      {label ?
        <label>{label}</label>
      : null}
    </div>
  );
}

ReactDOM.render(<SignUp />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
0 голосов
/ 06 марта 2020

Вы пытались использовать e.currentTarget вместо этого? 

const { name, value } = e.currentTarget;

Это обеспечит получение элемента, к которому подключен прослушиватель событий.

См .: Что является точной разницей между свойством currentTarget и свойством target в javascript

...