“。b2”是按钮的类名。 “ #subscribe”是div空白容器的ID。 jQuery在单击按钮时隐藏了div容器。如何将其转换为reactjs?
$(".b2").click(function(){
$("#subscribe").hide();
});
答案 0 :(得分:1)
在ReactJS中,您需要三件事:
1)状态为布尔型的有状态组件,已初始化为true。此布尔值将用于显示/隐藏容器。
2)一个将布尔值的状态更新为false的函数。
3)一种渲染方法,用于根据布尔状态和触发函数的按钮来渲染容器。
一起,您将需要这样的东西:
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
showContainer: true
}
}
hideContainer() {
this.setState({ showContainer: false });
}
render() {
return (
<div>
{this.state.showContainer && <div>MyContainer</div>}
<button onClick={() => this.hideContainer()}>Hide container</button>
</div>
)
}
}
答案 1 :(得分:1)
ReactJS是基于状态和组件的,您可以使用状态来控制视图中的UI。
要详细了解状态如何运行,请查看ReactJS docs(特别是“状态和生命周期”部分)
但是您可以通过以下方法实现上述目标:(未经测试的代码)
state = { visible: false }
<Button onClick={this.setState=({visible: !this.state.visible})}>Toggle me!</Button>
<Component visible={this.state.visible} />
以上内容将切换该组件的可见性。请注意,visibility
道具被传递到<Component>
中。您可以使用props
在组件内部访问它。
props文档中的更多信息。
答案 2 :(得分:0)
使用状态来设置元素的样式。
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
show: false
};
}
render() {
const { show } = this.state
return (
<div>
<p style={{ display: show ? "" : "none"}}>
Start editing to see some magic happen :)
</p>
<button onClick={() => this.setState({show: !show})}>
{show ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
render(<App />, document.getElementById('root'));