Javascript 使用状态响应所需的验证

我试图在react for required字段中手动实现表单验证。我想要的是用红色边框突出显示所有没有值的表单

目前，如果没有数据，我可以突出显示所有表单，但每当我在表单上键入任何内容时，数据仍然以红色突出显示。我真正想做的是，如果没有任何值，用红色边框突出显示所选输入，并阻止表单提交

这是我目前正在做的事情的进展

用于检查文本框中是否有值的代码

正在呈现的窗体的某些部分

---

总而言之。提交表单时，我只想突出显示红色边框中没有值的输入。

您可能希望在用户单击“提交”按钮时运行逻辑检查输入字段的状态，而不是在用户键入每个字段时

您可以使用e.preventDefault阻止表单提交

为此，您可以使用：

<form onSubmit={this.requiredFields}>

---

你做错了。所有字段必须为非空，只有它才能工作

    getFieldsThatHasError() {
      return this.state.formData.reduce((soFar, value, key) => {
        if (!value) {
          soFar[key] = 'error'
        }

        return soFar
      }, {})
    }

    requiredFields() {
      const errorFields = getFieldsThatHasError()

      this.setState({
        ...errorFields,
        errorMessage: ''
      })

      if (Object.keys(errorFields).length) {
        return false
      }

      return true
    }

---

很酷，所以我修改了您的组件，以便按照您的预期集成表单验证和错误处理。有关操作，请参见此处的codesandbox：

要注意的是，我注释掉了您使用的PhoneInput组件，只是使用了一个普通的输入标记作为临时选项。现在，您应该能够无缝地交换它。记住应用你的风格

import React from "react";

class Form extends React.Component {
  state = {
    inputs: {
      firstName: "",
      lastName: "",
      companyName: "",
      address: "",
      contactPhone: "",
      contactOfficePhone: "",
      city: ""
    },
    errors: {
      firstName: false,
      lastName: false,
      companyName: false,
      address: false,
      contactPhone: false,
      contactOfficePhone: false,
      city: false
    }
  };

  handleOnChange = event => {
    const { name, value } = event.target;
    this.setState({
      ...this.state,
      inputs: {
        ...this.state.inputs,
        [name]: value
      },
      errors: {
        ...this.state.errors,
        [name]: false
      }
    });
  };

  handleOnBlur = event => {
    const { inputs } = this.state;
    if (inputs[event.target.name].length === 0) {
      this.setState(
        {
          errors: {
            ...this.state.errors,
            [event.target.name]: true
          }
        },
        () => console.log(this.state)
      );
    }
  };

  handleOnSubmit = event => {
    event.preventDefault();
    const { inputs } = this.state;
    //create new errors object
    let newErrorsObj = Object.entries(inputs)
      .filter(([key, value]) => {
        return value.length === 0;
      })
      .reduce((obj, [key, value]) => {
        if (value.length === 0) {
          obj[key] = true;
        } else {
          obj[key] = false;
        }
        return obj;
      }, {});

    if (Object.keys(newErrorsObj).length > 0) {
      this.setState(
        {
          errors: newErrorsObj
        },
        () => console.log(this.state)
      );
    } else {
      //submission was succcessful
      //do logic
      console.log("success!");
    }
  };
  render() {
    const { errors } = this.state;
    return (
      <form id="registration_form" onSubmit={this.handleOnSubmit} noValidate>
        <div class="PixelForm-title">Register</div>
        <div className="RegisterModal--line-wrapper">
          <div className={"line"} />
        </div>
        <div className="form-group PixelFormField">
          <input
            id={"firstName"}
            placeholder={"first name"}
            className={`PixelForm-input ${errors.firstName ? "hasError" : ""}`}
            type="text"
            name={"firstName"}
            required
            onChange={e => this.handleOnChange(e)}
            value={this.state.firstName}
          />
        </div>
        <div className="form-group PixelFormField">
          <input
            id={"lastName"}
            placeholder={"last name"}
            className={`PixelForm-input ${errors.lastName ? "hasError" : ""}`}
            type="text"
            name={"lastName"}
            required
            onChange={e => this.handleOnChange(e)}
            value={this.state.lastName}
          />
        </div>

        {/*
        going to use a regular input for now, but you can swap this
        */}
        {/* <PhoneInput
          name={"contactPhone"}
          onChange={e => this.handleChange(e)}
          className={
            "PixelForm-input" +
            " " +
            (this.state.errorContactPhone === "error" ? "hasError" : "")
          }
          placeholder={"form.registration.mobile_phone.label" + "*"}
        /> */}

        <input
          name="contactPhone"
          placeholder="contact phone"
          required
          className={`PixelForm-input ${errors.contactPhone ? "hasError" : ""}`}
          onChange={e => this.handleOnChange(e)}
          value={this.state.contactPhone}
        />

        {/*<PhoneInput
          name={"contactOfficePhone"}
          onChange={e => this.handleChange(e)}
          className={
            "PixelForm-input" +
            " " +
            (this.state.errorContactOfficePhone === "error" ? "hasError" : "")
          }
          placeholder={t("form.registration.office_phone.label")}
        />*/}
        <input
          name="contactOfficePhone"
          placeholder="contact office phone"
          required
          className={`PixelForm-input ${
            errors.contactOfficePhone ? "hasError" : ""
          }`}
          onChange={e => this.handleOnChange(e)}
          value={this.state.contactOfficePhone}
        />

        <div className="PixelForm-subheader"> {"agency_information"}</div>
        <div className="RegisterModal--line-wrapper">
          <div className={"line"} />
        </div>
        <div className="form-group PixelFormField">
          <input
            id={"companyName"}
            placeholder={"company"}
            className={`PixelForm-input ${
              errors.companyName ? "hasError" : ""
            }`}
            type="text"
            name={"companyName"}
            required
            onChange={e => this.handleOnChange(e)}
            value={this.state.companyName}
          />
        </div>

        <div className="form-group PixelFormField">
          <input
            id={"address"}
            placeholder={"address"}
            className={`PixelForm-input ${errors.address ? "hasError" : ""}`}
            type="text"
            name={"address"}
            required
            onChange={e => this.handleOnChange(e)}
            value={this.state.address}
          />
        </div>

        <div className="form-group PixelFormField">
          <input
            id={"city"}
            placeholder={"city"}
            className={`PixelForm-input ${errors.city ? "hasError" : ""}`}
            type="text"
            name={"city"}
            required
            onChange={e => this.handleOnChange(e)}
            value={this.state.city}
          />
        </div>

        {Object.values(errors).includes(true) ? (
          <div class="PixelForm-error form-group">
            You forgot to fill something out
          </div>
        ) : (
          ""
        )}
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default Form;

---

我已经在我的提交表上做了，我通常用“如果”来检查！requiredForm{return false；}而不是return false请尝试使用e.preventDefault，如我编辑的回答中所示。我将对此进行检查。我还有一个问题，formData.reduce不是function@kiogipayaformData最初是一个对象，对吗？？因为reduce只适用于对象类型，而errorFields的错误是什么？在这个@kio gipaya上运气好吗？仍然无法解决这个问题problem@ChristopherNgo你对我的问题有什么建议吗？我已经坚持了几天了，实际上我刚刚创建了一个沙箱，它应该能让你对如何让它工作有所了解。它将为您提供如何使其工作的总体思路，但必须稍微修改您的代码。让我知道这是否与你想要的相似。这是我真正想做的。我只是在学习react，这就是为什么我很难解决一些像这样的基本问题

<form onSubmit={this.requiredFields}>

requiredFields(e){
    if(!this.isProfessionalFormValid()){
        e.preventDefault(); // << Prevent form submission
        this.setState({
            errorFirstName: 'error',
            errorLastName: 'error',
            errorAddress: 'error',
            errorCity: 'error',
            errorCompanyName: 'error',
            errorNewsletterSubscription: 'error',
            errorContactPhone: 'error',
            errorContactOfficePhone: 'error',
            errorMessage: ''
        });

        return false;
    }

    return true;
}

    getFieldsThatHasError() {
      return this.state.formData.reduce((soFar, value, key) => {
        if (!value) {
          soFar[key] = 'error'
        }

        return soFar
      }, {})
    }

    requiredFields() {
      const errorFields = getFieldsThatHasError()

      this.setState({
        ...errorFields,
        errorMessage: ''
      })

      if (Object.keys(errorFields).length) {
        return false
      }

      return true
    }

import React from "react";

class Form extends React.Component {
  state = {
    inputs: {
      firstName: "",
      lastName: "",
      companyName: "",
      address: "",
      contactPhone: "",
      contactOfficePhone: "",
      city: ""
    },
    errors: {
      firstName: false,
      lastName: false,
      companyName: false,
      address: false,
      contactPhone: false,
      contactOfficePhone: false,
      city: false
    }
  };

  handleOnChange = event => {
    const { name, value } = event.target;
    this.setState({
      ...this.state,
      inputs: {
        ...this.state.inputs,
        [name]: value
      },
      errors: {
        ...this.state.errors,
        [name]: false
      }
    });
  };

  handleOnBlur = event => {
    const { inputs } = this.state;
    if (inputs[event.target.name].length === 0) {
      this.setState(
        {
          errors: {
            ...this.state.errors,
            [event.target.name]: true
          }
        },
        () => console.log(this.state)
      );
    }
  };

  handleOnSubmit = event => {
    event.preventDefault();
    const { inputs } = this.state;
    //create new errors object
    let newErrorsObj = Object.entries(inputs)
      .filter(([key, value]) => {
        return value.length === 0;
      })
      .reduce((obj, [key, value]) => {
        if (value.length === 0) {
          obj[key] = true;
        } else {
          obj[key] = false;
        }
        return obj;
      }, {});

    if (Object.keys(newErrorsObj).length > 0) {
      this.setState(
        {
          errors: newErrorsObj
        },
        () => console.log(this.state)
      );
    } else {
      //submission was succcessful
      //do logic
      console.log("success!");
    }
  };
  render() {
    const { errors } = this.state;
    return (
      <form id="registration_form" onSubmit={this.handleOnSubmit} noValidate>
        <div class="PixelForm-title">Register</div>
        <div className="RegisterModal--line-wrapper">
          <div className={"line"} />
        </div>
        <div className="form-group PixelFormField">
          <input
            id={"firstName"}
            placeholder={"first name"}
            className={`PixelForm-input ${errors.firstName ? "hasError" : ""}`}
            type="text"
            name={"firstName"}
            required
            onChange={e => this.handleOnChange(e)}
            value={this.state.firstName}
          />
        </div>
        <div className="form-group PixelFormField">
          <input
            id={"lastName"}
            placeholder={"last name"}
            className={`PixelForm-input ${errors.lastName ? "hasError" : ""}`}
            type="text"
            name={"lastName"}
            required
            onChange={e => this.handleOnChange(e)}
            value={this.state.lastName}
          />
        </div>

        {/*
        going to use a regular input for now, but you can swap this
        */}
        {/* <PhoneInput
          name={"contactPhone"}
          onChange={e => this.handleChange(e)}
          className={
            "PixelForm-input" +
            " " +
            (this.state.errorContactPhone === "error" ? "hasError" : "")
          }
          placeholder={"form.registration.mobile_phone.label" + "*"}
        /> */}

        <input
          name="contactPhone"
          placeholder="contact phone"
          required
          className={`PixelForm-input ${errors.contactPhone ? "hasError" : ""}`}
          onChange={e => this.handleOnChange(e)}
          value={this.state.contactPhone}
        />

        {/*<PhoneInput
          name={"contactOfficePhone"}
          onChange={e => this.handleChange(e)}
          className={
            "PixelForm-input" +
            " " +
            (this.state.errorContactOfficePhone === "error" ? "hasError" : "")
          }
          placeholder={t("form.registration.office_phone.label")}
        />*/}
        <input
          name="contactOfficePhone"
          placeholder="contact office phone"
          required
          className={`PixelForm-input ${
            errors.contactOfficePhone ? "hasError" : ""
          }`}
          onChange={e => this.handleOnChange(e)}
          value={this.state.contactOfficePhone}
        />

        <div className="PixelForm-subheader"> {"agency_information"}</div>
        <div className="RegisterModal--line-wrapper">
          <div className={"line"} />
        </div>
        <div className="form-group PixelFormField">
          <input
            id={"companyName"}
            placeholder={"company"}
            className={`PixelForm-input ${
              errors.companyName ? "hasError" : ""
            }`}
            type="text"
            name={"companyName"}
            required
            onChange={e => this.handleOnChange(e)}
            value={this.state.companyName}
          />
        </div>

        <div className="form-group PixelFormField">
          <input
            id={"address"}
            placeholder={"address"}
            className={`PixelForm-input ${errors.address ? "hasError" : ""}`}
            type="text"
            name={"address"}
            required
            onChange={e => this.handleOnChange(e)}
            value={this.state.address}
          />
        </div>

        <div className="form-group PixelFormField">
          <input
            id={"city"}
            placeholder={"city"}
            className={`PixelForm-input ${errors.city ? "hasError" : ""}`}
            type="text"
            name={"city"}
            required
            onChange={e => this.handleOnChange(e)}
            value={this.state.city}
          />
        </div>

        {Object.values(errors).includes(true) ? (
          <div class="PixelForm-error form-group">
            You forgot to fill something out
          </div>
        ) : (
          ""
        )}
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default Form;