如何在反应js中发生事件（按钮单击）时将组件替换为另一个组件

Posted 2023-02-21

【中文标题】如何在反应js中发生事件（按钮单击）时将组件替换为另一个组件

【英文标题】：How to replace a component with another one upon event (button click) in react js

【发布时间】：2018-11-06 04:50:42

【问题描述】：

我有一个长长的数据显示列表，分为多个块，每个块的侧面都有一个编辑按钮，如下所示：

每当单击编辑按钮时，我需要将显示组件替换为编辑组件，将文本替换为这样的表单

什么是最好的方法来做到这一点。 当单击编辑时，我尝试将组件作为列表放入状态并用表单组件替换显示组件 所以不要从 render() 返回这个：

return(
 <Display />
 );

现在我要回来了：

return(
 this.state.components[0]
  );

当按钮被点击时

this.setState(components:[<EditForm />])

它有效，但我想知道将组件和 JSX 存储在状态中是一个好主意/专业实践吗？

【问题讨论】：

我认为这不是一个好主意。您是否有理由使用它而不是 if/else 或者使用对象来存储组件？

【参考方案1】：

你可以这样做： use a variable in state for knowing edit is clicked or not

state=
   isEdit:false,
  

on click of edit: this.setState(isEdit:true)

in render() use conditional rendering:

render()
   return(
    <div>
        (!this.state.isEdit) ? <Display /> : <EditForm />
     </div>
       )
     

【讨论】：

@yogesh 如果我的回答有效，请接受它，这样它也会帮助其他人

aravind_reddy如何在EditForm组件中传递数据？

你可以像 props 一样传递下去：<EditForm data=data />

你能给出/告诉你尝试了什么吗？也许放在沙箱或其他东西中以便于帮助

如果您希望更新历史记录以便浏览器的后退按钮重定向到上一个组件怎么办？

【参考方案2】：

我将保持一个布尔值状态，用于显示编辑表单或显示，并在按钮单击时切换它。

然后在您的渲染方法中，只需一个简单的 if 语句来选择要渲染的内容，例如

render() 
    if (this.state.edit) return <EditForm />
    return <Display />