javascript React - 单击时更改 CSS 属性（箭头功能）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46818687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React - Changing CSS property on click (arrow function)
提问by George Welder
I have the following in one of my React / Gatsby files:
我的 React / Gatsby 文件之一中有以下内容：
import React from "react"
const click = () => {
console.log("J");
}
const NavButton = () =>
<button className="navbar-toggler navbar-toggler-right" style={{backgroundColor: 'blue', position: "absolute", margin: "30px"}}type="button" data-toggle="collapse" data-target="#collapsingNavbar" onClick={click}>
<div id="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
</button>
const Dropdown = () =>
<div style={{visibility: "hidden", backgroundColor: "blue", position: "absolute", height: "100%", width: "100%"}}>
</div>
export default (props) =>
<div className="left col-xs-12 col-md-6">
<Dropdown />
<NavButton />
{props.children}
</div>
Now I would like to fire click()whenever somebody presses the NavButton, and then I would like to make Dropdownvisible. How would I do this? Right now I have it hardcoded that Dropdownhas style={{visibility: "hidden", ....
现在我想click()在有人按下 时触发NavButton，然后我想让它Dropdown可见。我该怎么做？现在我已经硬编码了Dropdown它style={{visibility: "hidden", ...。
I'm also wondering whether I am doing this correctly, having everything loosely in these different functions, if somebody could tell me that would be great!
我还想知道我是否正确地做到了这一点，在这些不同的功能中松散地拥有一切，如果有人能告诉我那会很棒！
回答by Brandon
Your controlling class needs to be stateful: it needs to maintain the boolean state as to whether the dropdown is open or closed. When rendering the dropdown, if the boolean is open, then you'll show the dropdown, else you won't.
您的控制类需要是有状态的：它需要保持关于下拉列表是打开还是关闭的布尔状态。渲染下拉菜单时，如果布尔值处于打开状态，则您将显示下拉菜单，否则不会显示。
Here is your code rewritten to do this. Note the child components take props as arguments. This is how the parent communicates with them. Some of those props are callbacks, this is how the child communicates back to the parent.
这是您为执行此操作而重写的代码。注意子组件将 props 作为参数。这就是父母与他们沟通的方式。其中一些道具是回调，这就是孩子与父母沟通的方式。
import React from "react"
const NavButton = ({onClick}) =>
<button className="navbar-toggler navbar-toggler-right" style={{backgroundColor: 'blue', position: "absolute", margin: "30px"}}type="button" data-toggle="collapse" data-target="#collapsingNavbar" onClick={onClick}>
<div id="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
</button>
const Dropdown = ({show}) =>
<div style={{visibility: show ? "visible" : "hidden", backgroundColor: "blue", position: "absolute", height: "100%", width: "100%"}}>
</div>
export default class Parent extends React.Component {
state = {
dropdownVisible: false,
};
// toggles the dropdown each time it is called
toggleDropdown = () => this.setState(state => ({
dropdownVisible: !state.dropdownVisible,
}));
render() {
return (
<div className="left col-xs-12 col-md-6">
<Dropdown show={this.state.dropdownVisible} />
<NavButton onClick={this.toggleDropdown} />
{this.props.children}
</div>
);
}
}
