如何在 React.Component 中显示/隐藏表单 div？

Question

我正在创建一个 CV 应用程序项目，并且我有一个允许用户添加工作经验的按钮。 当用户单击该按钮时，会弹出一个表单，他们可以填写信息并单击提交。

我试图做到这一点，一旦用户点击提交，表单 div 将保持隐藏状态，直到用户再次单击添加工作经验。 我之前在 vanilla JS 中做过类似的事情，我只是将 forms class 从display: block更改为display: none但这在 React 中似乎不可能。

import React, { Component } from "react";

class WorkExperience extends Component {
  render() {
    const workExperience = [
      {
        title: "title",
        company: "company",
        location: "location",
        description: "description",
      },
    ];
    return (
      <>
        <div id="content" className="content">
          <h1 className="title">Work Experience</h1>
          <div className="work-experience">
            <p>Job Title: {workExperience[0].title}</p>
            <p>Company: {workExperience[0].company}</p>
            <p>Location: {workExperience[0].location}</p>
            <p>Description: {workExperience[0].description}</p>
          </div>
        </div>
        <button className="form-btn">+ Add Work Experience</button>
      </>
    );
  }
}

export default WorkExperience;

这是我目前使用的表单代码。 这是我希望在单击上面显示的“添加工作经验”按钮后显示/隐藏的表单。

<form>
  <label for="title">Job Title</label>
  <input id="title" className="form-row" type="text" name="title" />
  <label for="company">Company</label>
  <input className="form-row" type="text" name="company" />
  <label for="location">Location</label>
  <input className="form-row" type="text" name="location" />
  <label for="description">Job Description</label>
  <textarea rows="4" cols="50" name="description"></textarea>
  <button className="save">Save</button>
  <button className="cancel">Cancel</button>
</form>

Answer 1

您可以使用 if 语句或三元语句来返回不同的 jsx。 那看起来像这样。 还有其他方法，但这是您可以执行的操作的基本示例。

 <>
   {
    shouldShow ?
   (
     <div id="content" className="content">
      <h1 className="title">Work Experience</h1>
      <div className="work-experience">
        <p>Job Title: {workExperience[0].title}</p>
        <p>Company: {workExperience[0].company}</p>
        <p>Location: {workExperience[0].location}</p>
        <p>Description: {workExperience[0].description}</p>
      </div>
    </div>
  <button className="form-btn">+ Add Work Experience</button>
 ) : (
  <form>
    <label for="title">Job Title</label>
    <input id="title" className="form-row" type="text" name="title" />
    <label for="company">Company</label>
    <input className="form-row" type="text" name="company" />
    <label for="location">Location</label>
    <input className="form-row" type="text" name="location" />
    <label for="description">Job Description</label>
    <textarea rows="4" cols="50" name="description"></textarea>
    <button className="save">Save</button>
    <button className="cancel">Cancel</button>
  </form>
 )
}
</>

shouldShow 决定表单是否显示。 这样做的好处是，如果表单正在显示，则不会将其他内容添加到 DOM，反之亦然。

shouldShow 是一个可以添加到 state 的变量，当单击该按钮时，您将切换 state 变量，从而导致重新渲染。

https://reactjs.org/docs/state-and-lifecycle.html

您还可以根据该组件是否显示来选择渲染 styles，关键是重新渲染组件的 boolean state 变量。

Answer 2

使用 Repeater Felids 添加用户工作经验。 这么好办。

中继器组件

import React from "react";

const Repeater = ({ inputFields, setInputFields }) => {
  const handleFormChange = (index, event) => {
    let data = [...inputFields];
    data[index][event.target.name] = event.target.value;
    setInputFields(data);
  };

  const removeFields = (index) => {
    let data = [...inputFields];
    data.splice(index, 1);
    setInputFields(data);
  };

  return (
    <div className="row">
      {inputFields.map((input, index) => {
        return (
          <>
            <div className="form-group col-sm-12 col-md-4 mb-3">
              <div className="controls">
                <input
                  type="text"
                  className="form-control inputset"
                  id="title"
                  placeholder="title"
                  name="title"
                  data-validation-required-message="This  field is required"
                  aria-invalid="true"
                  required
                  value={input.title}
                  onChange={(event) => handleFormChange(index, event)}
                />
                <div className="help-block" />
              </div>
            </div>
            <div className="form-group col-sm-12 col-md-4 mb-3">
              <div className="date-picker">
                <input
                  type="text"
                  className="pickadate form-control inputset"
                  value={input.company}
                  onChange={(event) => handleFormChange(index, event)}
                  name="company"
                  id="pass"
                  data-validation-required-message="This  field is required"
                  data-toggle="tooltip"
                  data-trigger="hover"
                  data-placement="top"
                  data-title="Date Opened"
                  data-original-title=""
                  required
                />
              </div>
            </div>
            <div className="form-group col-sm-12 col-md-4 d-flex mb-3">
              <input
                type="text"
                className="form-control inputset"
                id="location"
                placeholder="location"
                name="location"
                data-validation-required-message="This  field is required"
                aria-invalid="true"
                required
                value={input.location}
                onChange={(event) => handleFormChange(index, event)}
              />
               <input
                type="text"
                className="form-control inputset"
            id="description"
                placeholder="description"
                name="description"
                data-validation-required-message="This  field is required"
            aria-invalid="true"
            required
            value={input.description}
            onChange={(event) => handleFormChange(index, event)}
          />
              {inputFields.length === 1 ? null : (
            <button
              type="button"
              className=" d-flex justify-content-center align-items-center ml-1 btn"
              onClick={() => {
                removeFields();
              }}
            >
              <i className="uil-trash-alt" />
            </button>
          )}
        </div>
      </>
        );
      })}
    </div>
  );
};

export default Repeater;

主要部件

使用这些作为状态并将对象传递给中继器组件。 首先，state 是空的，当用户单击“添加更多体验”按钮时，文件会自动显示。

const [inputFields, setInputFields] = useState([
  { degree_title: "", institue: "", end_date: "" },
]);



 const addFields = () => {
 let newfield = { degree_title: "", institue: "", end_date: "" };

 setInputFields([...inputFields, newfield]);
};

<Repeater
 inputFields={inputFields}
 setInputFields={setInputFields}
 addFields={addFields} />

希望此解决方案对您有所帮助：) 请确保根据您的要求更改 state object。