我希望在单击拾取按钮时显示表单组件中的数据

Question

我希望在单击拾取按钮时显示表单组件中的数据。当单击“是”或“否”按钮时，来自 myvehicles 的数据将输入到拾取组件中。我试过这样，但它不起作用。

import React,{ useState } from 'react'
import './Pickup.css'
import logo from './images/logo.png'
import { Link, useHistory } from "react-router-dom";
import InfoYes from './InfoYes'
import InfoNo from './InfoNo'




function Pickup() {
    const [showInfoYes, setShowInfoYes] = useState(false);
    const [showInfoNo, setShowInfoNo] = useState(false);
    const history = useHistory()
    
    return (
        
        
      
        <div className="pickup">
        
  
            <div className="vehicles__navbar">

<Link to="/" className="header__link">
    <img
    className="navbar__logo"
    src={logo}
    alt="logo"
    />
</Link>

<button className="navbar__button" onClick={() => history.push('/')}>Logout</button>

</div>

            <div className="pickup__info">
            <h1 className="h1__pickup">do you want bluebook pickup service?</h1> 
            <div className="pickup__button">
            <button className="yes__button" onClick={() => setShowInfoYes(!showInfoYes)}>yes</button>
            <button className="no__button" onClick={() => setShowInfoNo(!showInfoNo)}>no</button>
            </div>
            {showInfoYes && <InfoYes setShowInfoYes={setShowInfoYes} />}            </div>
            {showInfoNo && <InfoNo setShowInfoNo={setShowInfoNo} />}  
            
        </div>
    )
}

export default Pickup

Answer 1

我认为您可以通过条件渲染来实现这一点。 其中涉及 if 语句和真假条件。

请查看此文档以了解其工作原理。 Documentation （Reactjs.org 有非常棒的文档，我真的鼓励你去阅读它。）

在您的代码中没有任何地方，我看到您的状态设置为 TRUE 以使其呈现。 您需要创建一个 onClick 处理程序来将其设置为 true 或 false。

一个简单的例子是：

    const [userClicked, setUserClicked] = useState(false);
    
    { userClicked ? 

    ( <button onClick={() => setUserClicked(false)> No </button> 

   ) : ( 

     <button onClick={() => setUserClicked(true)> Yes </button> 
    
    )}

这是在 react 中生成 if/then 语句的三元运算符的简写。 这将是最容易实现您的目标的方法，尽管我建议您对此进行更多研究！

{userClicked ? ( ) : ( ) }

你也可以拿出来：

const [showInfoYes, setShowInfoYes] = useState(false);
const [showInfoNo, setShowInfoNo] = useState(false);

这有点多余，因为您试图实现可以在单一状态下完成的事情。