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

Question

新建Tasks.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”时显示其他组件。有什么方法可以实现吗？

Answer 1

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

...

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

...

Answer 2

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

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

或

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

Answer 3

如果你想 select 任何输入

输入的名称应该相同

    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

Answer 4

按照

的方式尝试一些东西

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

或者如果你想把它模块化

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

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

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

Conditional rendering a component with using Radio button

javascript

reactjs

conditional-rendering

新建Tasks.js