如何在 React Js 中创建这 3 个按钮？

Question

我正在尝试创建这 3 个按钮，但无法创建第三个按钮，因为我不知道如何在 React Js 中使用多个 useState。

这是我的代码：

  const ShowOrNot = () => {
    const [showForm, setShowForm] = useState(false);
    const [showPreview , setShowPreview] = useState(false)

    return (
        <div className="col-12">
            {showForm ? (
                <div className={"content-send-form-wrapper"} id="scrollbar-style">
                    <div className={"content-send-form-header"}>
                        <div className={"content-send-form-header-title"}>
                           
                        </div>
                        <h2>
                            New Upload
                        </h2>
                        <div className={"content-send-form-close-btn"}>
                            <button onClick={() => setShowForm(false)} className={"close-modal-btn"}>
                                Close <span></span>
                            </button>
                        </div>
                    </div>
                    <form className={"mt-3 content-send-form-data register-teacher-inputs-box "}>
                        <Row>
                            <div className={"col-lg-6 col-12 mt-4"}>
                                <label
                                    htmlFor={"name"} className={" text-right"}>
                                    <span>*</span>
                                </label>
                                <input type="text" className="form-control" placeholder={"عنوان"}
                                       name={""} required="true"
                                       // value={this.name}
                                       // onChange={this.onChange}
                                       onBlur={(e) => e.target.placeholder = "عنوان"}
                                       onFocus={(e) => e.target.placeholder = ""}
                                />
                            </div>
                            <div className={"col-lg-6 col-12 mt-4"}>
                                <label
                                    htmlFor={"country"} className={" text-right"}>
                                    <span>*</span>
                                </label>
                                <input type="text" className="form-control" placeholder={"دسته بندی"}
                                       name={"country"}
                                       // value={this.country}
                                       // onChange={this.onChange}
                                       required="true"
                                       onBlur={(e) => e.target.placeholder = "دسته بندی"}
                                       onFocus={(e) => e.target.placeholder = ""}
                                />
                            </div>
                        </Row>
                        <Row>
                            <div className="col-12 mt-3">
                                <label
                                    htmlFor={"name"} className={"label-full-size text-right"}>
                                    <span>*</span>
                                </label>
                                <input type="text" className="form-control" placeholder={"خلاصه توضیحات"}
                                       name={""} required="true"
                                       // value={this.name}
                                       // onChange={this.onChange}
                                       onBlur={(e) => e.target.placeholder = "خلاصه توضیحات"}
                                       onFocus={(e) => e.target.placeholder = ""}
                                />
                            </div>
                        </Row>
                        <Row>
                            <div className="col-12 mt-3">
                                <label
                                    htmlFor={"name"} className={"label-full-size text-right textarea-label"}>
                                    <span>*</span>
                                </label>
                                <textarea  className="video-text-form form-control" placeholder={"متن ویدیو"}
                                       name={""} required="true"
                                       // value={this.name}
                                       // onChange={this.onChange}
                                       onBlur={(e) => e.target.placeholder = "متن ویدیو"}
                                       onFocus={(e) => e.target.placeholder = ""}
                                />
                            </div>
                        </Row>
                        <Row>
                            <div className="col-12 mt-3 video-upload-input-btn">
                                <VideoUpload />
                            </div>
                        </Row>
                        <Row>
                            <div className="col-lg-6 col-12 mt-3">
                              <PosterUpload />
                            </div>
                            <div className="col-lg-6 col-12 mt-3">
                                <CoverUpload />
                            </div>
                        </Row>
                    </form>
               
                    {showPreview ? (
                        <div>
                            show preview
                        </div>
                    ) : (<Row>
                        <div className="col-lg-8 col mt-3">
                            <button className="preview-send-data-btn" onClick={function(event){ setShowPreview(true); setShowForm(true)}}>
                               Preview
                            </button>
                        </div>
                        <div className="col-lg-4 col mt-3">
                            <button className="draft-send-data-btn">
                               Draft
                            </button>
                        </div>
                    </Row>)}

                </div>
            ) : (
                <div>
                    <button className="upload-content-btn w-100" onClick={() => setShowForm(true)}>
                        <span className="ml-2">
                     
                    </span>New Upload </button>
                </div>
            )}
        </div>
    );
};

ReactDOM.render(<ShowOrNot />, document.getElementById("root"))

我希望当单击预览按钮时，showFrom 不显示，而其他形式则在 showPreview 中显示。我的问题与 CSS 无关，只是我不知道如何使用 useState，就像我使用它之前的步骤一样。

Answer 1

你应该像这段代码一样使用 setState

setShowForm(false) or setShowForm(true)

和

setShowPreview(true) or setShowPreview(false)

Answer 2

在您的示例中 Preview 在 Form 内，所以如果您隐藏 form preview 也将被隐藏。

您需要正确组织组件，以便您的代码易于阅读和理解。没有它，您将无法解决任何足够复杂的任务。

可以这样开始。

const ShowOrNot = () => {
  const [showForm, setShowForm] = useState(false);
  const [showPreview, setShowPreview] = useState(false);
  const [formHidden, setFormHidden] = useState(false);

  return (
    <div className="col-12">
      {!showForm ? (
        <ShowFormButton onClick={() => setShowForm(true)} />
      ) : undefined}

      {showForm ? (
        <div className={'content-send-form-wrapper'} id="scrollbar-style">
          <div className={'content-send-form-header'}>
            <div className={'content-send-form-header-title'}></div>
            <h2>New Upload</h2>

            <HideFormButton
              onClick={() => {
                setShowForm(false);
              }}
            />
          </div>

          {!formHidden ? <MyForm /> : undefined}

          {!showPreview ? (
            <ShowPreviewButton
              onClick={() => {
                setShowPreview(true);
                setFormHidden(true);
              }}
            />
          ) : undefined}
          {showPreview ? (
            <div>
              Preview
              <SendButton
                onClick={() => {
                  setFormHidden(false);
                  setShowPreview(false);
                  setShowForm(false);
                }}
              />
            </div>
          ) : undefined}
        </div>
      ) : undefined}
    </div>
  );
};

function SendButton({ onClick }) {
  return (
    <div>
      <button className=" w-100" onClick={onClick}>
        <span className="ml-2"></span>Send
      </button>
    </div>
  );
}

function ShowFormButton({ onClick }) {
  return (
    <div>
      <button className="upload-content-btn w-100" onClick={onClick}>
        <span className="ml-2"></span>New Upload{' '}
      </button>
    </div>
  );
}

function ShowPreviewButton({ onClick }) {
  return (
    <Row>
      <div className="col-lg-8 col mt-3">
        <button className="preview-send-data-btn" onClick={onClick}>
          Preview
        </button>
      </div>
      <div className="col-lg-4 col mt-3">
        <button className="draft-send-data-btn">Draft</button>
      </div>
    </Row>
  );
}

function HideFormButton({ onClick }) {
  return (
    <div className={'content-send-form-close-btn'}>
      <button onClick={onClick} className={'close-modal-btn'}>
        <span>Close</span>
      </button>
    </div>
  );
}

function MyForm() {
  return (
    <form
      className={'mt-3 content-send-form-data register-teacher-inputs-box '}
    >
      <Row>
        <div className={'col-lg-6 col-12 mt-4'}>
          <label htmlFor={'name'} className={' text-right'}>
            <span>*</span>
          </label>
          <input
            type="text"
            className="form-control"
            placeholder={'عنوان'}
            name={''}
            required="true"
            // value={this.name}
            // onChange={this.onChange}
            onBlur={(e) => (e.target.placeholder = 'عنوان')}
            onFocus={(e) => (e.target.placeholder = '')}
          />
        </div>
        <div className={'col-lg-6 col-12 mt-4'}>
          <label htmlFor={'country'} className={' text-right'}>
            <span>*</span>
          </label>
          <input
            type="text"
            className="form-control"
            placeholder={'دسته بندی'}
            name={'country'}
            // value={this.country}
            // onChange={this.onChange}
            required="true"
            onBlur={(e) => (e.target.placeholder = 'دسته بندی')}
            onFocus={(e) => (e.target.placeholder = '')}
          />
        </div>
      </Row>
      <Row>
        <div className="col-12 mt-3">
          <label htmlFor={'name'} className={'label-full-size text-right'}>
            <span>*</span>
          </label>
          <input
            type="text"
            className="form-control"
            placeholder={'خلاصه توضیحات'}
            name={''}
            required="true"
            // value={this.name}
            // onChange={this.onChange}
            onBlur={(e) => (e.target.placeholder = 'خلاصه توضیحات')}
            onFocus={(e) => (e.target.placeholder = '')}
          />
        </div>
      </Row>
      <Row>
        <div className="col-12 mt-3">
          <label
            htmlFor={'name'}
            className={'label-full-size text-right textarea-label'}
          >
            <span>*</span>
          </label>
          <textarea
            className="video-text-form form-control"
            placeholder={'متن ویدیو'}
            name={''}
            required="true"
            // value={this.name}
            // onChange={this.onChange}
            onBlur={(e) => (e.target.placeholder = 'متن ویدیو')}
            onFocus={(e) => (e.target.placeholder = '')}
          />
        </div>
      </Row>
      <Row>
        <div className="col-12 mt-3 video-upload-input-btn">
          <VideoUpload />
        </div>
      </Row>
      <Row>
        <div className="col-lg-6 col-12 mt-3">
          <PosterUpload />
        </div>
        <div className="col-lg-6 col-12 mt-3">
          <CoverUpload />
        </div>
      </Row>
    </form>
  );
}

ReactDOM.render(<ShowOrNot />, document.getElementById('root'));