如何在响应js中的事件（按钮单击）中用另一个组件替换组件

Question

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

每当点击编辑按钮时，我需要用编辑组件替换显示组件，用这样的形式替换文本

这是最好的方法。 我已经尝试将组件放在state中作为列表，并在单击Edit时将Form组件替换为Form Component 所以不要从render（）中返回它：

return(
 <Display />
 );

现在我回来了：

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

单击按钮时执行此操作

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

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

Answer 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>
       )
     }

Answer 2

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

然后在render方法中只是一个简单的if语句来选择要呈现的内容，例如

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

Answer 3

最好您可以使用条件语句根据您的要求显示隐藏组件。

实施例： 1）保持组件的模式（即）状态以显示隐藏输入框 2）单击按钮将状态更改为true或false 3）然后它会自动显示/隐藏

快乐的编码！