在 React 中单击时切换字体真棒图标

Question

我有一个项目列表，每个项目都以“caret-down”图标开头。单击图标时，我将在项目下显示一些内容，并将图标更改为“插入符号”。现在，如果再次单击该图标，它会变回“插入符号”并且显示的内容被隐藏。我正在使用以下内容：

this.state.errors.map((item, index) =>
                            <tr key={index}>
                                <td>
                                    <a className="btn btn-link" onClick={this.caretClickHandler}>
                                        <FontAwesomeIcon icon="caret-down" />
                                    </a>
                                </td>
                                <td>{item.date}</td>
                                <td>{item.administratorEmail}</td>
                                <td>{item.organizationName}</td>
                                <td>{item.customerId}</td>
                            </tr>
)

我想在“caretClickHandler()”中实现切换逻辑。如何实现这样的切换？

Answer 1

您需要使用状态，然后在点击时更新状态。有了这个，您就可以为您的图标使用三元组。

例如：

const [isClicked, setIsClicked] = useState(false)

//Never change state directly
onClick={() => setIsClicked(prev => !prev)} 

<FontAwesomeIcon icon={isClicked ? "caret-up" : "caret-down"} />