Question

React的新手，所以这可能是一个愚蠢的问题：

我有一个要替换的组件（我认为），因此，如果我单击一个用于编辑详细信息的按钮，它将用编辑替换显示内容。我的想法是开始渲染

<div>
  <h1>{this.props.journal.name}</h1>
  <button>Edit details</button>
</div>

然后我点击按钮，它变成了

<div>
  <form>
    <input type="text" value={this.props.journal.name} />
    <button>Save</button>
    <button>Cancel</button>
  </form>
</div>

我将如何处理？我猜我也应该对状态做些事情。

Answer 1

使用useState钩子可以很容易地设置状态-在这种情况下，showEdit是用于更改状态toggleShowEdit并设置默认值的函数-“ true”传递到useState挂钩中。

然后在输出中根据所更改的状态仅显示所需的内容。在这里，一个基于布尔值showEdit的简单表达式可以很好地工作。

有关useState挂钩的更多信息：https://reactjs.org/docs/hooks-state.html

import React, { useState } from 'react';

const MyComponent = (props) => {
  const [showEdit, toggleShowEdit] = useState(false);

  return (
    <>
      {!showEdit &&
        <div>
          <h1>{props.journal.name}</h1>
          <button onClick={() => toggleShowEdit(true)}>Edit details</button>
        </div>
      }
      {showEdit &&
        <div>
          <form>
            <input type="text" value={props.journal.name} />
            <button>Save</button>
            <button onClick={() => toggleShowEdit(false)}>Cancel</button>
          </form>
        </div>
      }
    </>
  );
};

export default MyComponent;

Answer 2

假设您有一个基于类的组件

首先创建一个状态对象（在渲染功能之前）

{!this.state.edit ? (
<div>
    <h1>{this.props.journal.name}</h1>
    <button onClick={() => this.setState({edit:true})}>Edit details</button>
</div>
) : (
<div>
    <form>
        <input type="text" value={this.props.journal.name} />
        <button onClick={() => this.setState({edit:false})}>Save</button>
        <button onClick={() => this.setState({edit:false})}>Cancel</button>
    </form>
</div>
) }

然后在您的组件中执行此操作

{{1}}

希望这会有所帮助

单击按钮，将包含的组件替换为其他组件

2 个答案: