Fatal编程技术网
  • javascript/
  • Javascript 如何基于单选按钮在onClick事件中添加if-else语句

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

javascript reactjs typescript

Javascript 如何基于单选按钮在onClick事件中添加if-else语句,javascript,reactjs,typescript,Javascript,Reactjs,Typescript,我目前有一个页面，从我拥有的两个单独的URL以卡片的形式加载两个单独的数据列表，如下所示： http://localhost:3000/videos http://localhost:3000/manuals <Popup trigger={<button className="btn blue-outline"> Create a new card</button>} modal posit

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

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

<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，它加载两个独立的列表组件并将它们显示在一起。我还有一个“创建卡片”按钮，它打开一个模式，一旦填写了所需的信息并单击了submit按钮，单击该按钮就会加载“CreateCard”功能

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

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

<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>


标题：
{
this.setState（{title:e.target.value}）；
}}
值={this.state.title}>
网址：
{
this.setState（{url:e.target.value}）；
}}>
缩略图URL:
{
this.setState（{缩略图：e.target.value}）；
}}
值={this.state.thumbnail}>
this.setState（{whichRadioSelected:“video”}）
/>
显卡
this.setState（{whichRadioSelected:“manual”}）}
/>
手册卡



this.createManualProduct（this.state.title、this.state.url、this.state.缩略图）}
className=“btn蓝色轮廓”
id=“confirmModalBtn”>
创造
我想知道如何实现if-else语句，该语句能够确定是否选择了“video”或“manual”单选按钮，根据这一点，如果选择了“video”，则运行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;

import React，{Component}来自“React”；
从“./components/helpAdmin/help/HelpList”导入帮助列表；
导入“./components/helpAdmin/help/HelpList”；
导入“./components/helpAdmin/help/ManualHelpList”；
导入“./components/helpAdmin/help/HelpCard”；
从“组件/ui”导入{模式、按钮、工具提示、图标、选项卡、复选框、单选}；
从“reactjs弹出窗口”导入弹出窗口；
从“./components/helpAdmin/help/ManualHelpList”导入手动帮助列表；
接口道具{}
界面状态{
url:string；
标题：字符串；
adminhelpcard:SingleAdminHelpCard[]；
错误：null；
答复：{}；
缩略图：字符串；
isEditProduct：布尔型；
isAddProduct：布尔型；
id：字符串；
已选择whichRadioSelected：字符串；
}
接口单管理员帮助卡{
id：字符串；
url:string；
标题：字符串；
缩略图：字符串；
}
导出类HelpAdminView扩展组件{
状态={
标题：“，
缩略图：“”，
id:“”，
url:“http://localhost:3000/videos/",
管理员帮助卡：[]，
项目浏览每页：1，
活动页面：1，
错误：null，
答复：{}，
isEditProduct：是的，
艾萨克：没错，
其中，RadioSelected:“
};
componentDidMount（）{}
createVideoProduct（标题：字符串、url:字符串、缩略图：字符串）{
const{adminhelpcard}=this.state；
常量apiUrl=`http://localhost:3000/videos/`;
常量选项={
方法：“张贴”，
标题：{“内容类型”：“应用程序/json”}，
正文：JSON.stringify({
标题
网址，
缩略图
})
};
获取（APIRL、选项）
.然后（（res）=>res.json（））
.那么(
（结果）=>{
这是我的国家({
答复：结果
});
},
（错误）=>{
this.setState（{error}）；
}
);
}
createManualProduct（标题：字符串、url:字符串、缩略图：字符串）{
const{adminhelpcard}=this.state；
常量apiUrl=`http://localhost:3000/manuals/`;
常量选项={
方法：“张贴”，
标题：{“内容类型”：“应用程序/json”}，
正文：JSON.stringify({
标题
网址，
缩略图
})
};
获取（APIRL、选项）
.然后（（res）=>res.json（））
.那么(
（结果）=>{
这是我的国家({
答复：结果
});
},
（错误）=>{
this.setState（{error}）；
}
);
}
render（）{
返回(
标题：
{
this.setState（{title:e.target.value}）；
}}
值={this.state.title}>
网址：
{
this.setState（{url:e.target.value}）；
}}>
缩略图URL:
{
this.setState（{缩略图：e.target.value}）；
}}
值={this.state.thumbnail}>
this.setState（{whichRadioSelected:“video”}）
/>
显卡
this.setState（{whichRadioSelected:“manual”}）}
/>
手册卡



this.createManualProduct（this.state.title、this.state.url、this.state.缩略图）}
className=“btn蓝色轮廓”
id=“confirmModalBtn”>
创造