使用react更改另一个元素的样式

Question

我对反应还比较陌生，完全不知道如何在按下按钮时显示组件。我已经将代码设置为这样的

<Button>GO</Button>
<CalendarIcon id="calendar visibility="hidden"/>

然后使用Visibility()

export default function useVisibility() {
const[visibility, setVisibility] = useState("hidden")
useEffect(() => {
function handleVis(){
setVisibility("visible")
}
button.addEventListener("onClick", handleVis)
return () => button.removeEventListener("onClick", handleVis)
}, [])
return visibility
}

我的问题是，我不知道如何将按钮传递到函数中，以便添加事件侦听器。如果我做这件事的方式完全迂回或过于复杂，请告诉我，因为我太迷失了。

谢谢！

Answer 1

我要做的是让每个呈现按钮的实例指定其点击处理程序的行为，因为网站中的按钮可能有很多用例。

function MyComponent() {
const[isVisible, setIsVisible] = useState(false)
const handleVisibilityToggle = useCallback(
() => setIsVisible(!isVisible),
[isVisible, setIsVisible]
)
...
const visibility = isVisible ? 'unset' : 'hidden'
return (
<>
...
<Button onClick={handleVisibilityToggle}>GO</Button>
<CalendarIcon id="calendar" visibility={visibility}/>
</>
)
}

如果你想清理代码的使用方式，并将逻辑抽象为可见性挂钩，它看起来就像这个

function useVisibilityToggle(defaultValue = false) {
const[isVisible, setIsVisible] = useState(defaultValue)
const toggleVisibility = useCallback(
() => setIsVisible(!isVisible),
[isVisible, setIsVisible]
)
const visibility = isVisible ? 'visible' : 'hidden'
return [visibility, toggleVisibility]
}
function MyComponent() {
const [visibility, toggleVisibility] = useVisibilityToggle(false)

return (
<>
...
<Button onClick={toggleVisibility}>GO</Button>
<CalendarIcon id="calendar" visibility={visibility}/>
</>
)
}

Answer 2

请在此处查看第一个示例：https://reactjs.org/docs/hooks-state.html

function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

这将向您展示如何在单击按钮时操作状态。接下来，当单击该按钮时，您希望显示/隐藏某些内容。

首先，让我们将useState更改为布尔状态，因此

const [hidden, setHidden] = useState(false);

然后我们可以更改按钮，使其使用以前的状态来设置新的状态。您永远不应该在setHidden中使用hidden，而是应该向其传递一个函数，该函数将获取上一个值作为参数。

<button onClick={() => setHidden(prevHidden => !prevHidden)}>

现在我们想使用这个值，所以我们可以在按钮下面添加一些内容：

{ !hidden ? (<p>This text is visible</p>) : (<></>) }

工作示例：https://codesandbox.io/s/strange-williamson-wuhnb?file=/src/App.js

你的代码看起来像是在尝试构建一个自定义钩子，这是更高级的东西，如果你是React的新手，你现在就不需要了。

Answer 3

您的主要目标是在单击GO按钮时显示可见的CalendarIcon组件。

所以你需要一个状态，比如visible变量来控制它。您可以在单击Button时将此状态更新为true或false，如下所示，并使visibility="visible"始终存在。

当visible将成为true时，您的CalendarIcon将出现。

const [visible, toggleVisibility] = useState(false)
<Button onClick={()=> toggleVisibility(!visible)}>GO</Button>
{visible && <CalendarIcon id="calendar" visibility="visible"/>}