单击时更改折叠的 Header 属性的文本。 （蚂蚁）

Question

我是 Antd 新手。我想在单击标题文本时将其从“显示详细信息”更改为“隐藏详细信息”。 header 是 Antd 中折叠功能的一部分。我附上了两张我想要做的事情的图片以及我当前拥有的代码。

<Collapse
              bordered={false}
              className="shadow p-2 mb-5 bg-white rounded
              style={{ marginTop: 16, width: '100%', background: 'white' }}
              >
                <Collapse.Panel header="Show Details">
                  <table border={0} cellPadding={5} cellSpacing={10}>
                    <tr>
                      <th className="table-header">Lead Information</th>
                    </tr>
                    <tr>
                      <td>Lead Owner</td>
                      <td>
                        <input className="inputField-2" type="text" />
                      </td>
                      <td>Company</td>
                      <td>
                        <input className="inputField-2" type="text" />
                      </td>
                    </tr>
                   <tr>
                      <td>Twitter</td>
                      <td>
                        <input className="inputField-2" type="text" />
                      </td>
                    </tr>
                  </table>
                  <br />
                </Collapse.Panel>
</Collapse>

Answer 1

Antd Collapse 可能没有这方面的 API，因此您可以在单击 Collapse.Panel 时使用 useState 钩子来保存状态。然后使用该状态来检查要显示哪个标题。

const [collapsed, setCollapsed] = useState(true);
     
<Collapse
  onChange={(key) =>
    key.length > 0 ? setCollapsed(false) : setCollapsed(true)
  }
>
  <Collapse.Panel
    key={"detail"}
    header={collapsed ? "Show Detail" : "Hide Detail"}
  >
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  </Collapse.Panel>
</Collapse>

如果您有多个 Collapse.Panel，请记得检查每个面板的状况。