使用单选按钮有条件地渲染组件答案

【问题标题】：Conditional rendering a component with using Radio button使用单选按钮有条件地渲染组件
【发布时间】：2021-11-27 07:24:28
【问题描述】：

新任务.js

import React, { useState } from "react";
import './NewTask.css';
import TaskDetails from "./TaskDetails";
import TaskSetting from "./TaskSetting";

const NewTask = () => {
    const [checked, setChecked] = useState("inPerson");


    return (
        <div className="newtask-div">
            <h3 className="header">New Task</h3>
            <ul className="task-item">
                <li style={{ fontSize: "17px" }}>Select Task Type: </li>
                <li>
                    <input
                        type="radio"
                        checked={checked === "inPerson"}
                        name="inPerson" value="inPerson"
                        onChange={(e) => {
                            setChecked(e.target.value)
                            console.log("show task details")
                        }}
                    />
                    <lable>In Person</lable>
                </li>
                <li>
                    <input
                        type="radio"
                        checked={checked === "online"}
                        name="online" value="online"
                        onChange={(e) => {
                            setChecked(e.target.value)
                            console.log("dont show task detail")
                        }}
                    />
                    <lable>Online</lable>
                </li>
            </ul>

            <TaskDetails />

        </div>
    )
}
export default NewTask

我正在尝试使用单选按钮来条件渲染组件。例如：当点击“inPerson”时，它会渲染出“TaskDetail”组件并在使用“online”时显示其他组件。有什么方法可以实现吗？

【问题讨论】：

有条件地渲染哪个组件？你在找{checked && <TaskDetails />}吗？
标签，不是标签
即时尝试选择“inperson”选项时，它将呈现出TaskDetails，并且在选择“Online”时不会呈现。正是我想要做的：/

标签： javascript reactjs conditional-rendering

【解决方案1】：

您可以根据所选值有条件地渲染组件，如下所示：

...

{
   checked === "inPerson" && 
   <InpersonComponents />
}
{
   checked === "online" && 
   <OnlineComponents />
}

...

【讨论】：

【解决方案2】：

我推荐这种带有条件渲染的方法

{checked === "inPerson" ? <TaskDetails /> : <SomeOtherComponent />

或

{checked === "inPerson" && <TaskDetails />}
{checked === "online" && <SomeOtherComponent />}

【讨论】：

【解决方案3】：

如果您想选择其中任何一个，输入的名称应该相同

    const NewTask = () => {
        const [inPerson, setInPerson] = useState(true);
        const [online, setOnline] = useState(false);
    
    
        return (
            <div className="newtask-div">
                <h3 className="header">New Task</h3>
                <ul className="task-item">
                    <li style={{ fontSize: "17px" }}>Select Task Type: </li>
                    <li>
                        <input
                            type="radio"
                            checked={online}
                            name="singlegroup" value="inPerson"
                            onChange={(e) => {
                                setInPerson(e.target.value)
                                setOnline(!e.target.value)
                                console.log("show task details")
                            }}
                        />
                        <lable>In Person</lable>
                    </li>
                    <li>
                        <input
                            type="radio"
                            checked={inPerson}
                            name="singlegroup" value="online"
                            onChange={(e) => {
                                setOnline(e.target.value)
                                setInPerson(!e.target.value)
                                console.log("dont show task detail")
                            }}
                        />
                        <lable>Online</lable>
                    </li>
                </ul>
    
                <TaskDetails />
                {
                online && <Component1/>                
}
{
                inPerson && <Component2/>                
}
    
            </div>
        )
    }
    export default NewTask

【讨论】：

【解决方案4】：

尝试一些类似的东西

{checked !== 'inPerson' && (
  <TaskDetails />
)}

或者如果你想让它模块化

const showDetails = () => {
  return checked !== 'inPerson'
}

return (
  ...
  {showDetails() && (
    <TaskDetails />
  )}
  ...
)

【讨论】：