下面是一个示例代码,演示了如何创建一个布尔值组件:
import React, { useState } from 'react';
const BooleanComponent = () => {
const [value, setValue] = useState(false);
const handleClick = () => {
setValue(!value);
};
return (
);
};
export default BooleanComponent;
在这个示例中,我们使用了React的useState
钩子来创建一个名为value
的状态变量。我们将其初始值设置为false
。setValue
是一个函数,用于更新value
的值。
handleClick
函数会在按钮点击时被调用。它会使用setValue
来切换value
的值。如果value
为true
,则点击按钮后会将其设置为false
,反之亦然。
在组件的返回部分,我们渲染一个按钮。按钮的文本根据value
的值而定,如果value
为true
,则显示"True",反之显示"False"。当按钮被点击时,handleClick
函数会被调用,从而切换value
的值。
你可以在你的React应用中使用这个布尔值组件,通过在其他组件中导入和渲染它来实现布尔值的交互。
上一篇:布尔值总是自动变成“False”
下一篇:布尔值作为 if-else 条件