javascript - reactjs问题中的验证检查

Question

为什么一旦表单打开，即使验证检查正确，当一切都为空时，我也看不到单击完成按钮的验证警报？基本上表单打开我不输入任何内容并单击完成按钮，因此所有验证检查都应该工作并显示文本“必需。请输入您的名字。” 但它没有显示？导致状态最后为空白的问题在哪里

const addSecondaryContact = inject('apptContacts')(observer((props) => {
  const {
    i18n, nbnContact, apptContacts, backButtonContent,
  } = props;
  const { updatePrimaryContact } = apptContacts;
  const CMS = i18n.appointmentManager.editAppointmentContact;
  const [state, setState] = useState({
    data: {
      firstName: '',
      lastName: '',
      number: '',
    },
    firstNameValid: '',
    lastNameValid: '',
    numberValid: '',
  });
  const validFirstName = () => {
    console.log(state.data.firstName);
    if (!state.data.firstName) {
      console.log('frstname1');
      return 'Required.Please enter your given name.';
    }
    if (!/^[A-Za-z]+$/.test(state.data.firstName)) {
      console.log('frstname2');
      return 'Invalid entry.Please use letters only.';
    } if (state.data.firstName.length === 1) {
      console.log('frstname3');
      return 'Invalid entry.More than one character is required';
    }
    console.log('&&&&');
    return '';
  };
  const validLastName = () => {
    console.log('988');
    if (!state.data.lastName) { console.log('lastname'); return 'Required.Please enter your given name.'; }
    if (!/^[A-Za-z]+$/.test(state.data.lastName)) {
      return 'Invalid entry.Please use letters only.';
    } if (state.data.lastName.length === 1) {
      return 'Invalid entry.More than one character is required';
    }
    return '';
  };
  const validNumber = async () => {
    console.log('777');
    if (!state.data.number) { return 'Required.Please enter your mobile number.'; }
    if (state.data.number.substr(0, 2) !== '04') {
      return 'Invalid entry.Please enter your 10-digit mobile number starting with 04.';
    } if (state.data.number.length !== 10) {
      return 'Invalid entry.Please enter your 10-digit mobile number starting with 04.';
    } if (state.data.number.length === 1) {
      return 'Invalid entry.More than one number is required';
    }
    return '';
  };

  const valid = async () => {
    console.log('milan');
    setState({
      ...state,
      firstNameValid: validFirstName(),
      lastNameValid: validLastName(),
      numberValid: validNumber(),
    });
    console.log(state.firstNameValid);
      console.log(state.lastNameValid);
      console.log(state.numberValid);
  };
  const handleTextareaChange = (event) => {
    console.log('%%%');
    const { data } = state;
    data[event.target.name] = event.target.value;
    setState({
      ...state,
      data,
    });
    valid();
  };

  const saveButton = async () => {
    console.log(state);
    await valid();
    if (valid()) {
      console.log(state.firstNameValid);
      console.log(state.lastNameValid);
      console.log(state.numberValid);
      if (!state.firstNameValid && !state.lastNameValid && !state.numberValid) {
        const personName = `${state.data.firstName} ${state.data.lastName}`;
        const primaryContact = {
          name: personName,
          phoneNumber: state.data.number,
          // updatePrimaryContact(primaryContact)
        };
        // updatePrimaryContact(primaryContact)
        backButtonContent();
      }
    }
  };
  return (
    <div>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
      <h1 tabIndex="-1" className="HeadingB mt-sheet-heading">
        {CMS.heading2}
      </h1>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="givenName" name="firstName" label={CMS.name} onChange={handleTextareaChange} value={state.data.firstName} />
      {state.firstNameValid && (
      <Alert variant="error" inline>
        <p>
          {state.firstNameValid}
        </p>
      </Alert>
      )}
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="familyName" name="lastName" label={CMS.familyName} onChange={handleTextareaChange} value={state.data.lastName} />
      {state.lastNameValid && (
      <Alert variant="error" inline>
        <p>
          {state.lastNameValid}
        </p>
      </Alert>
      )}
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="mobileNumber" name="number" label={CMS.mobile} onChange={handleTextareaChange} value={state.data.number} />
      {state.numberValid && (
      <Alert variant="error" inline>
        <p>
          {state.numberValid}
        </p>
      </Alert>
      )}
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
      <ActionButton className={styles.saveCta} variant="HighEmphasis" label={CMS.saveCTA} onClick={() => saveButton()} />
    </div>
  );
}));

export default addSecondaryContact;

标签： javascriptreactjs

Answer 1

你有两个主要问题：

1. 您状态更新不正确 - 您多次设置状态
2. 你有async你的validNumber方法 - 这会导致空白输出

这是我从您的代码中修改的代码 - 也许它可以帮助您。我删除了额外的组件以删除依赖项并仅使用纯 html。

演示：https ://codesandbox.io/s/upbeat-feynman-w3odj?file=/App.js

import "./styles.css";
import React from "react";

export default function App() {
  const [state, setState] = React.useState({
    data: {
      firstName: "",
      lastName: "",
      number: ""
    },
    firstNameValid: "",
    lastNameValid: "",
    numberValid: ""
  });
  const validFirstName = () => {
    console.log(state.data.firstName);
    let result = "";
    if (!state.data.firstName) {
      console.log("frstname1");
      result = "Required.Please enter your given name.";
    }
    if (!/^[A-Za-z]+$/.test(state.data.firstName)) {
      console.log("frstname2");
      result = "Invalid entry.Please use letters only.";
    }
    if (state.data.firstName.length === 1) {
      console.log("frstname3");
      result = "Invalid entry.More than one character is required";
    }
    console.log("&&&&");
    return result;
  };
  const validLastName = () => {
    console.log("988");
    if (!state.data.lastName) {
      console.log("lastname");
      return "Required.Please enter your given name.";
    }
    if (!/^[A-Za-z]+$/.test(state.data.lastName)) {
      return "Invalid entry.Please use letters only.";
    }
    if (state.data.lastName.length === 1) {
      return "Invalid entry.More than one character is required";
    }
    return "";
  };
  const validNumber = () => {
    console.log("777");
    if (!state.data.number) {
      return "Required.Please enter your mobile number.";
    }
    if (state.data.number.substr(0, 2) !== "04") {
      return "Invalid entry.Please enter your 10-digit mobile number starting with 04.";
    }
    if (state.data.number.length !== 10) {
      return "Invalid entry.Please enter your 10-digit mobile number starting with 04.";
    }
    if (state.data.number.length === 1) {
      return "Invalid entry.More than one number is required";
    }
    return "";
  };

  const valid = async () => {
    console.log("milan");
    setState({
      ...state,
      firstNameValid: validFirstName(),
      lastNameValid: validLastName(),
      numberValid: validNumber()
    });
    console.log(state.firstNameValid);
    console.log(state.lastNameValid);
    console.log(state.numberValid);
  };
  const handleTextareaChange = (event) => {
    let validRes = "";
    let key = "";
    if (event.target.name === "firstName") {
      validRes = validFirstName();
      key = "firstNameValid";
    }
    if (event.target.name === "lastName") {
      validRes = validLastName();
      key = "firstNameValid";
    }
    if (event.target.name === "number") {
      validRes = validNumber();
      key = "numberValid";
    }
    console.log("234", validRes);
    setState({
      ...state,
      data: { ...state.data, [event.target.name]: event.target.value },
      // [key]:
      firstNameValid: validFirstName(),
      lastNameValid: validLastName(),
      numberValid: validNumber()
    });
    // valid();
  };

  const saveButton = async () => {
    console.log(state);
    await valid();
    if (valid()) {
      console.log(state.firstNameValid);
      console.log(state.lastNameValid);
      console.log(state.numberValid);
    }
  };
  return (
    <div>
      <h1 tabIndex="-1" className="HeadingB mt-sheet-heading">
        'CMS.heading2'
      </h1>
      <input
        type="text"
        id="givenName"
        name="firstName"
        label="CMS.name"
        onChange={handleTextareaChange}
        value={state.data.firstName}
      />
      {state.firstNameValid && <p>{state.firstNameValid}</p>}

      <input
        type="text"
        id="familyName"
        name="lastName"
        label="CMS.familyName"
        onChange={handleTextareaChange}
        value={state.data.lastName}
      />
      {state.lastNameValid && <p>{state.lastNameValid}</p>}
      <input
        type="text"
        id="mobileNumber"
        name="number"
        label="CMS.mobile"
        onChange={handleTextareaChange}
        value={state.data.number}
      />
      {state.numberValid && <p>{state.numberValid}</p>}
      <button
        variant="HighEmphasis"
        label="CMS.saveCTA"
        onClick={() => saveButton()}
      />
    </div>
  );
}