Javascript 在“反应”中单击按钮调用功能组件

我有一个功能组件，里面有一个按钮。我想在单击该按钮时调用一个功能组件

当我们单击Submit按钮时，将显示Preview按钮，当用户单击Preview按钮时，将调用Preview functional component

const Form =(props)=>{

handlePreview=(e)=>{
    e.preventDefault();

    return <Preview/>
  }

return(
<input name="email" type="text"/>
<button type="submit" onClick={props.handleSubmit}>Submit</button><br/>
  {props.render&& 
   <button type="submit" onClick={handlePreview}>Preview</button>
  }

)
}

const Form=（道具）=>{
handlePreview=（e）=>{
e、 预防默认值（）；
返回
}
返回(
提交

{props.render&&
预览
}
)
}

---

当我单击提交按钮时，预览按钮会显示，但当我单击预览按钮时，它不会导航到

功能组件

要渲染组件，您应该从功能

表单

返回它。如果您从事件处理程序返回任何组件，它将被忽略

所以要显示

组件，您应该创建本地状态。在功能组件中，可以使用如下方法完成

const Form =(props)=>{
    const [isPreviewShown, setPreviewShown] = useState(false);

    handlePreview=(e)=>{
        e.preventDefault();

        setPreviewShown(true); // Here we change state
    }

    return(
        <input name="email" type="text"/>
        <button type="submit" onClick={props.handleSubmit}>Submit</button><br/>
        {props.render&& 
            <button type="submit" onClick={handlePreview}>Preview</button>
        }
        {isPreviewShown && <Preview/>}

    )
}

const Form=（道具）=>{
const[isPreviewShown，setPreviewShown]=useState（false）；
handlePreview=（e）=>{
e、 预防默认值（）；
setPreviewShown（true）；//这里我们更改状态
}
返回(
提交

{props.render&&
预览
}
{isPreviewShown&&}
)
}

如果您希望有条件地呈现组件，您应该将您的

预览
组件包括在
表单中，并通过
状态进行控制，然后在
hooks
中共享答案，我建议您澄清OP使用的ReactJS版本，因为许多ReactJS项目仍然不支持
hooks
，以防万一，我想知道为什么你的答案不起作用。（顺便说一句，我投了更高的票）