React如何给某些元素动态添加和删除类？

今天在写项目时遇到了一个简单的需求，一个列表详情界面需要添加编辑和保存功能，刚开始页面只有编辑按钮，点击此按钮之后取消和保存按钮出现，原来的编辑按钮消失，然后再点击取消按钮，取消和保存按钮消失，编辑按钮出现。
先简单说一下实现思路：

• 把编辑按钮放在一个div里，取消和保存按钮放在一个div里，由于业务需求，我放在了Form表单里了
• 给编辑按钮和取消按钮分别绑定一个点击事件，就分别叫做 editBtn 和 cancleBtn 吧
• 给两个Form分别写一个类

.haha{  //编辑按钮的样式
	display: block;
}
.haha1{  //取消和删除按钮的样式
	display: none;
}

• 给按钮一个初始化状态status=0，如果点击了编辑按钮，status=1，如果再点击了取消按钮，status=0
• 通过判断状态来给两个div设置className值

让我们来看一下代码

import React, {useState} from 'react';
const [status,setStatus]=useState(0);  //设置初始状态

const editBtn=()=>{
    setStatus(1); //说明点击了编辑按钮
    alert('请开始编辑');
}
const cancleBtn=()=>{
    setStatus(0); //说明是初始化或者点击了取消按钮
}

return (
	<div>
		<Form className={status==0 ? 'haha' : 'haha1'}>
	         <Form.Item>
	            <Button onClick={editBtn}> //绑定点击事件editBtn
	               编辑
	            </Button>
	         </Form.Item>
    	</Form>
	    <Form className={status==1 ? 'haha' : 'haha1'}>
	         <Form.Item>
	            <Button onClick={cancleBtn}>  //绑定点击事件cancleBtn
	               取消
	            </Button>
	            <Button>
	               保存
	            </Button>
	         </Form.Item>
	    </Form>
	</div>
)

在这里用到了三元表达式来赋类名

status==0 ? 'haha' : 'haha1'  //如果状态为0，赋haha类名，如果状态不是0，即状态是1，赋haha1类名

status==1 ? 'haha' : 'haha1'  //如果状态为1，赋haha1类名，如果状态不是1，即状态是0，赋haha类名

最后看一下效果图：
这是初始化状态

这是点击编辑之后的样式

点击取消之后也能回到图一。