javascript - 如何在基于单选按钮的 onClick 事件中添加 if-else 语句

Question

我目前有一个页面，从我拥有的两个单独的 URL 中以卡片的形式加载 2 个单独的数据列表，如下所示:

http://localhost:3000/videos
http://localhost:3000/manuals

所以我有一个 div 加载两个单独的列表组件并将它们显示在一起。我还有一个打开模式的“创建卡”按钮，填写所需信息并单击提交按钮后，按钮的 onClick 会加载“CreateCard”函数。

最初，我有一个可以成功创建卡片的工作页面，但它只会将其提交到/videos。我现在创建了 2 个独立的函数，一个用于创建/videos，另一个用于创建/modules。此外，我添加了单选按钮，允许用户决定是创建/module 还是/video 卡。创建表单的代码如下:

<Popup
            trigger={<button className="btn blue-outline"> Create a new card</button>}
            modal
            position="right center">
            <div>
              <div>
                <label>Title:</label>
                <input
                  style={{ width: "100%" }}
                  className="input"
                  name="createCardTitle"
                  onChange={(e) => {
                    this.setState({ title: e.target.value });
                  }}
                  value={this.state.title}></input>
              </div>
              <div>
                <label>URL:</label>
                <input
                  style={{ width: "100%" }}
                  className="input"
                  name="createCardURL"
                  onChange={(e) => {
                    this.setState({ url: e.target.value });
                  }}></input>
              </div>
              <div>
                <label>Thumbnail URL:</label>
                <input
                  style={{ width: "100%" }}
                  className="input"
                  name="createCardThumbnail"
                  onChange={(e) => {
                    this.setState({ thumbnail: e.target.value });
                  }}
                  value={this.state.thumbnail}></input>
              </div>
              <label className="radio">
                <input
                  id="videoCardRadio"
                  type="radio"
                  name="radio_group_1"
                  value="video"
                  checked={this.state.whichRadioSelected === "video"}
                  onChange={() => this.setState({ whichRadioSelected: "video" })}
                />
                <span>Video Card</span>
              </label>
              <label className="radio">
                <input
                  id="manualCardRadio"
                  type="radio"
                  name="radio_group_1"
                  value="manual"
                  checked={this.state.whichRadioSelected === "manual"}
                  onChange={() => this.setState({ whichRadioSelected: "manual" })}
                />
                <span>Manual Card</span>
              </label>
              <br></br>
              <button
                style={{
                  float: "left"
                }}
                onClick={() => this.createManualProduct(this.state.title, this.state.url, this.state.thumbnail)}
                className="btn blue-outline"
                id="confirmModalBtn">
                Create
              </button>
            </div>
          </Popup>

我正在尝试弄清楚如何实现 if-else 语句，该语句能够确定是否选择了“视频”或“手动”单选按钮，并根据情况确定是否选择了“视频”选择，然后运行 ​​createVideoCard() 函数。如果选择“手动”，则运行 createManualCard() 函数。

下面提供了页面其余部分的代码，以防需要引用:

import React, { Component } from "react";
import HelpList from "../components/helpAdmin/help/HelpList";
import "../components/helpAdmin/help/HelpList";
import "../components/helpAdmin/help/ManualHelpList";
import "../components/helpAdmin/help/HelpCard";
import { Modal, Button, Tooltip, Icon, Tabs, Checkbox, Radio } from "components/ui";
import Popup from "reactjs-popup";


import ManualHelpList from "../components/helpAdmin/help/ManualHelpList";

interface Props {}

interface State {
  url: string;
  title: string;
  adminhelpcard: SingleAdminHelpCard[];
  error: null;
  response: {};
  thumbnail: string;
  isEditProduct: boolean;
  isAddProduct: boolean;
  id: string;
  whichRadioSelected: string;
}
interface SingleAdminHelpCard {
  id: string;
  url: string;
  title: string;
  thumbnail: string;
}

export class HelpAdminView extends Component<Props, State> {
  state = {
    title: "",
    thumbnail: "",
    id: "",
    url: "http://localhost:3000/videos/",
    adminhelpcard: [],
    itemsCountPerPage: 1,
    activePage: 1,
    error: null,
    response: {},
    isEditProduct: true,
    isAddProduct: true,
    whichRadioSelected: ""
  };
  componentDidMount() {}

  createVideoProduct(title: string, url: string, thumbnail: string) {
    const { adminhelpcard } = this.state;
    const apiUrl = `http://localhost:3000/videos/`;

    const options = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title,
        url,
        thumbnail
      })
    };

    fetch(apiUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            response: result
          });
        },
        (error) => {
          this.setState({ error });
        }
      );
  }

  createManualProduct(title: string, url: string, thumbnail: string) {
    const { adminhelpcard } = this.state;
    const apiUrl = `http://localhost:3000/manuals/`;

    const options = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title,
        url,
        thumbnail
      })
    };

    fetch(apiUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState({
            response: result
          });
        },
        (error) => {
          this.setState({ error });
        }
      );
  }

  render() {
    return (
      <main>
        <div className="box">
          <Popup
            trigger={<button className="btn blue-outline"> Create a new card</button>}
            modal
            position="right center">
            <div>
              <div>
                <label>Title:</label>
                <input
                  style={{ width: "100%" }}
                  className="input"
                  name="createCardTitle"
                  onChange={(e) => {
                    this.setState({ title: e.target.value });
                  }}
                  value={this.state.title}></input>
              </div>
              <div>
                <label>URL:</label>
                <input
                  style={{ width: "100%" }}
                  className="input"
                  name="createCardURL"
                  onChange={(e) => {
                    this.setState({ url: e.target.value });
                  }}></input>
              </div>
              <div>
                <label>Thumbnail URL:</label>
                <input
                  style={{ width: "100%" }}
                  className="input"
                  name="createCardThumbnail"
                  onChange={(e) => {
                    this.setState({ thumbnail: e.target.value });
                  }}
                  value={this.state.thumbnail}></input>
              </div>
              <label className="radio">
                <input
                  id="videoCardRadio"
                  type="radio"
                  name="radio_group_1"
                  value="video"
                  checked={this.state.whichRadioSelected === "video"}
                  onChange={() => this.setState({ whichRadioSelected: "video" })}
                />
                <span>Video Card</span>
              </label>
              <label className="radio">
                <input
                  id="manualCardRadio"
                  type="radio"
                  name="radio_group_1"
                  value="manual"
                  checked={this.state.whichRadioSelected === "manual"}
                  onChange={() => this.setState({ whichRadioSelected: "manual" })}
                />
                <span>Manual Card</span>
              </label>
              <br></br>
              <button
                style={{
                  float: "left"
                }}
                onClick={() => this.createManualProduct(this.state.title, this.state.url, this.state.thumbnail)}
                className="btn blue-outline"
                id="confirmModalBtn">
                Create
              </button>
            </div>
          </Popup>
          <div className="listDisplay">
            <HelpList />
            <ManualHelpList />
          </div>
        </div>
      </main>
    );
  }
}
export default HelpAdminView;

Answer 1

如果this.state.whichRadioSelected === "video"，则可以调用createVideo，如果不这样调用createManuals

clickHandler = () => {
    if(this.state.whichRadioSelected === "video") {
      this.createVideo();
    } else {
      this.createManuals();
    } 
}

并在您的按钮中，将此处理程序函数传递给您的 onClick 事件，如下所示

<Button onClick={() => {this.clickHandler();}}