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

Posted 2023-02-22

【中文标题】使用单选按钮有条件地渲染组件

【英文标题】：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”时不会呈现。正是我想要做的：/

【参考方案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 />
  )
  ...
)