Как правильно обрабатывать события изменения поля в React, используя пользовательский хук? - PullRequest
Новая
       4

Как правильно обрабатывать события изменения поля в React, используя пользовательский хук?

2 голосов
/ 24 апреля 2020

В настоящее время я создаю простую страницу формы регистрации, чтобы расширить свои знания о React Web Apps. У меня есть несколько различных типов элементов формы. Я сталкиваюсь со следующей ошибкой, когда использую свой пользовательский хук для обработки изменений в любом из полей формы, которые не являются простыми текстовыми полями.

TypeError: Невозможно прочитать свойство 'name' из undefined (анонимная функция) C: / Users / paris / Desktop / covidsocial / frontend / src / libs / hooksLib. js: 11 function (событие) {

  9 |     setValues({
  10 |       ...fields,
> 11 |       [event.target.name]: event.target.value
     | ^  12 |     });
  13 |   }
  14 | ];

Вышеуказанное сообщение об ошибке появляется каждый раз, когда я выбираю страну из выпадающего списка выбора региона и страны или средства выбора даты. Я попытался использовать элементы name и control-id в качестве идентификаторов, но все равно получаю то же сообщение об ошибке, что и выше. Я думаю, что проблема в том, как я устанавливаю свои значения, но я очень плохо знаком с React и у меня возникают проблемы с точным определением того, что происходит. Любая помощь будет принята с благодарностью! Вот соответствующий код для моей Регистрации. js класс, а также пользовательский крюк реакции

hookslib. js

import { useState } from "react";
export function useFormFields(initialState) {
  const [fields, setValues] = useState(initialState);
  return [
    fields,
    function(event) {
      setValues({
        ...fields,
        [event.target.name]: event.target.value
      });
    }
  ];
}

Регистрация . js

export default function Signup() {
  const [fields, handleFieldChange] = useFormFields({
    email: "",
    password: "",
    confirmPassword: "",
    confirmationCode: "",
    gender: "",
    onList: false,
    dateOfBirth: "",
    mailingAddressLine1: "",
    mailingAddressLine2: "",
    mailingAddressCity: "",
    mailingAddressState: "",
    mailingAddressZip: "",
    billingAddressLine1: "",
    billingAddressLine2: "",
    billingAddressCity: "",
    billingAddressState: "",
    billingAddressZip: "",
    useShippingAsBilling: false,

  });
  const history = useHistory();
  const [newUser, setNewUser] = useState(null);
  const { userHasAuthenticated } = useAppContext();
  const [isLoading, setIsLoading] = useState(false);

  function validateForm() {
    return (
      fields.email.length > 0 &&
      fields.password.length > 0 &&
      fields.password === fields.confirmPassword
    );
  }

  function validateConfirmationForm() {
    return fields.confirmationCode.length > 0;
  }

  async function handleSubmit(event) {
    event.preventDefault();

    setIsLoading(true);

    try {
      const newUser = await Auth.signUp({
        username: fields.email,
        password: fields.password,
        confirmPassword: fields.confirmPassword,
        gender: fields.gender,
        firstName: fields.firstName,
        lastName: fields.lastName,
        onList: fields.onList,
        dateOfBirth: fields.dateOfBirth,
        mailingAddressLine1: fields.mailingAddressLine1,
        mailingAddressLine2: fields.mailingAddressLine2,
        mailingAddressCity: fields.mailingAddressCity,
        mailingAddressState: fields.mailingAddressState,
        mailingAddressZip: fields.mailingAddressZip,
        mailingAddressCountry: fields.mailingAddressCountry,
        billingAddressCountry: fields.billingAddressCountry,
        billingAddressLine1: fields.billingAddressLine1,
        billingAddressLine2: fields.billingAddressLine2,
        billingAddressCity: fields.billingAddressCity,
        billingAddressState: fields.billingAddressState,
        billingAddressZip: fields.billingAddressZip,
      });
      setIsLoading(false);
      setNewUser(newUser);
    } catch (e) {
      onError(e);
      setIsLoading(false);
    }
  }

  async function handleConfirmationSubmit(event) {
    event.preventDefault();

    setIsLoading(true);

    try {
      await Auth.confirmSignUp(fields.email, fields.confirmationCode);
      await Auth.signIn(fields.email, fields.password);

      userHasAuthenticated(true);
      history.push("/");
    } catch (e) {
      onError(e);
      setIsLoading(false);
    }
  }

  function renderConfirmationForm() {
    return (
      <form onSubmit={handleConfirmationSubmit}>
        <FormGroup controlId="confirmationCode" bsSize="large">
          <ControlLabel>Confirmation Code</ControlLabel>
          <FormControl
            autoFocus
            type="tel"
            onChange={handleFieldChange}
            value={fields.confirmationCode}
          />
          <HelpBlock>Please check your email for the code.</HelpBlock>
        </FormGroup>

        <LoaderButton
          block
          type="submit"
          bsSize="large"
          isLoading={isLoading}
          disabled={!validateConfirmationForm()}
        >
          Verify
        </LoaderButton>
      </form>
    );
  }

  function renderForm() {
    return (
      <form onSubmit={handleSubmit}>
        <FormGroup controlId="email" bsSize="large">
          <ControlLabel>Email</ControlLabel>
          <FormControl
            autoFocus
            name = "email"
            type="email"
            value={fields.email}
            onChange={handleFieldChange}
          />
        </FormGroup>
        <FormGroup controlId="password" bsSize="large">
          <ControlLabel>Password</ControlLabel>
          <FormControl
            type="password"
            name = "password"
            value={fields.password}
            onChange={handleFieldChange}
          />
        </FormGroup>
        <FormGroup controlId="confirmPassword" bsSize="large">
          <ControlLabel>Confirm Password</ControlLabel>
          <FormControl
            type="password"
            name = "confirmPassword"
            onChange={handleFieldChange}
            value={fields.confirmPassword}
          />
        </FormGroup>

        <FormGroup controlId="mailingAddressLine1" bsSize="large">
          <ControlLabel>Mailing Address Line 1</ControlLabel>
          <FormControl
            type="text"
            name = "mailingAddressLine1"
            onChange={handleFieldChange}
            value={fields.mailingAddressLine1}
          />
        </FormGroup>

        <FormGroup controlId="mailingAddressLine2" bsSize="large">
          <ControlLabel>Mailing Address Line 2</ControlLabel>
          <FormControl
            type="text"
            name = "mailingAddressLine2"
            onChange={handleFieldChange}
            value={fields.mailingAddressLine2}
          />
        </FormGroup>


        <FormGroup controlId="mailingAddressCountry" bsSize="large">
          <ControlLabel>Country</ControlLabel>
          <CountryDropdown
            name = "mailingAddressCountry"
            country={fields.mailingAddressCountry}
            value={fields.mailingAddressCountry}
            onChange={handleFieldChange} />
        </FormGroup>


        <FormGroup controlId="mailingAddressRegion" bsSize="large">
          <ControlLabel>State</ControlLabel>
          <RegionDropdown
            //country={country}
            name="mailingAddressRegion"
            country={fields.mailingAddressCountry}
            value={fields.mailingAddressState}
            onChange={handleFieldChange} />
        </FormGroup>

        <FormGroup controlId="city" bsSize="large">
          <ControlLabel>City</ControlLabel>
          <FormControl
            type="text"
            name="city"
            onChange={handleFieldChange}
            value={fields.mailingAddressCity}
          />
        </FormGroup>

        <FormGroup controlId="zipCode" bsSize="large">
          <ControlLabel>Zip Code</ControlLabel>
          <FormControl
            type="text"
            name="zipCode"
            onChange={handleFieldChange}
            value={fields.mailingAddressZip}
          />
        </FormGroup>

        <FormGroup controlId="useShippingAsBilling" bsSize="large">
          <label>
            Use Shipping As Billing:
          <input
              name = "useShippingAsBilling"
              type="checkbox"
              id="useShippingasBilling"
              value={fields.useShippingAsBilling}
              checked={fields.useShippingAsBilling === true}
              onChange={handleFieldChange} />
          </label>
        </FormGroup>
        <br />


        <FormGroup controlId="billingAddressLine1" bsSize="large">
          <ControlLabel>Billing Address Line 1</ControlLabel>
          <FormControl
            name ="billingAddressLine1"
            type="text"
            value={fields.billingAddressLine1}
            onChange={handleFieldChange}
          />
        </FormGroup>

        <FormGroup controlId="billingAddressLine2" bsSize="large">
          <ControlLabel>Billing Address Line 2</ControlLabel>
          <FormControl
           name ="billingAddressLine2"
            type="text"
            value={fields.billingAddressLine2}
            onChange={handleFieldChange}
          />
        </FormGroup>


        <FormGroup controlId="billingAddressCountry" bsSize="large">
          <ControlLabel>BillingAddressCountry</ControlLabel>
          <CountryDropdown
             name="billingAddressCountry"
            value={fields.billingAddressCountry}
            onChange={handleFieldChange}
          />
        </FormGroup>


        <FormGroup controlId="mailingAddressRegion" bsSize="large">
          <ControlLabel>Billing Address Region</ControlLabel>
          <RegionDropdown
          name="mailingAddressRegion"
            country={fields.billingAddressCountry}
            value={fields.billingAddressRegion}
            onChange={handleFieldChange} />
        </FormGroup>

        <FormGroup controlId="billingCity" bsSize="large">
          <ControlLabel>City</ControlLabel>
          <FormControl
            name = "billingCity"
            type="text"
            value={fields.billingAddressCity}
            onChange={handleFieldChange}
          />
        </FormGroup>

        <FormGroup controlId="billingZipCode" bsSize="large">
          <ControlLabel>Zip Code</ControlLabel>
          <FormControl
            name = "billingZipCode"
            type="text"
            value={fields.billingAddressZip}
            onChange={handleFieldChange}
          />
        </FormGroup>

        <FormGroup controlId="gender" bsSize="sm">
          <ControlLabel>Gender</ControlLabel>
          <br></br>
          <ControlLabel>Male</ControlLabel>
          <FormControl
           name = "gender"
            type="radio"
            onChange={handleFieldChange}
            value={fields.gender}
            checked={fields.gender === 'male'}
          />
          <ControlLabel>Female</ControlLabel>
          <FormControl
          name = "gender"
            type="radio"
            onChange={handleFieldChange}
            value={fields.gender}
            checked={fields.gender === 'female'}
          />
          <ControlLabel>Other</ControlLabel>
          <FormControl
          name = "gender"
            type="radio"
            onChange={handleFieldChange}
            value={fields.gender}
            checked={fields.gender === 'other'}
          />
        </FormGroup>


        <FormGroup controlId="onList" bsSize="sm">
          <br></br>
          <ControlLabel>Join Email List</ControlLabel>
          <br></br>
          <ControlLabel>Yes</ControlLabel>
          <FormControl
          name = "onList"
            type="checkbox"
            onChange={handleFieldChange}
            value={fields.onList}
            checked={fields.onList === 'true'}
          />
        </FormGroup>


        <FormGroup controlId="dateOfBirth">
        <ControlLabel>Date of Birth</ControlLabel>
          <DatePicker
           name="dateOfBirth"
            value={fields.dateofBirth}
            selected={fields.dateOfBirth}
            onChange={handleFieldChange}
            locale="en"
          />
        </FormGroup>

        <FormGroup controlId="content">
          <ControlLabel>Notes Area</ControlLabel>
          <FormControl
            name = "content"
            value={fields.content}
            componentClass="textarea"
            onChange={handleFieldChange}
          />
        </FormGroup>

        <LoaderButton
          block
          type="submit"
          bsSize="large"
          isLoading={isLoading}
          disabled={!validateForm()}
        >
          Signup
        </LoaderButton>
      </form>
    );
  }

  return (
    <div className="Signup">
      {newUser === null ? renderForm() : renderConfirmationForm()}
    </div>
  );
}

1 Ответ

1 голос
/ 25 апреля 2020

Это умный подход к обработке событий изменения и сохранению значений в состоянии. Тем не менее, вы очень доверяете этой библиотеке компонентов, чтобы запускать события onChange последовательно с их HTML аналогами.

Я заметил в документах , что onChange немного отличается чем вы могли бы ожидать: 

<CountryDropdown
    value={country}
    onChange={(val) => this.selectCountry(val)} />
<RegionDropdown
    country={country}
    value={region}
    onChange={(val) => this.selectRegion(val)} />

Оба они ожидают, что обработчик функции стрелки получит свойство val, поэтому вы можете переписать реализацию: 

<CountryDropdown
    name = "mailingAddressCountry"
    country={fields.mailingAddressCountry}
    value={fields.mailingAddressCountry}
    onChange={(val) => updateField({ mailingAddress: val})} />

И изменить свой хук на так что вы не работаете с голого события. Это потребует немного большего синтаксиса, и, возможно, есть более понятный подход, но он даст вам контроль, необходимый для обработки крайних случаев. Примерно так: 

import { useState } from "react";
export function useFormFields(initialState) {
  const [fields, setValues] = useState(initialState);
  return [
    fields,
    function(value) {
      setValues({
        ...fields,
        ...value
      });
    }
  ];
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...