[英]Toggle showing and hiding components in ReactJs
I have been struggling to show/hide components in ReactJs for a couple of days. 几天来,我一直在努力展示/隐藏ReactJs中的组件。 I am trying to show the ("Write(blocks)" - which needs to be hidden from view by default) and shown when the "edit" links are clicked (while toggling hide / show for the "Read" blocks) and hide them when either the "save" or "cancel" buttons are clicked, I will be taking care of the save function later.
我正在尝试显示(“ Write(blocks)”-默认情况下需要从视图中隐藏),并在单击“ edit”链接时显示(同时切换“ Read”块的隐藏/显示)并将其隐藏当单击“保存”或“取消”按钮时,稍后我将处理保存功能。 For now I am just trying to show / hide the component based on this.
现在,我只是尝试基于此显示/隐藏组件。
Below is my code: 下面是我的代码:
class ProfileSettings extends React.Component {
render() {
return (
<div className="ProfileSettings">
<SettingsBlock className="Names" label="Name" link="name">
<p className="readOnlySettingField ReadNames">Hilal Agil<a href="#">Edit</a></p>
<div className="WriteNames">
<SubBlock label="First Name" placeholder="First Name" />
<SubBlock label="Middle Name" placeholder="Middle Name" />
<SubBlock label="Last Name" placeholder="Last Name" />
<p className="notice"><strong>Please note:</strong> You wont be able to change your name within the next 30 days.
Make sure not to add any unusual capitalization, punctuation, characters or random words.</p>
<button className="button small fill primary">Save Changes</button>
<button className="button small default">Cancel</button>
</div>
</SettingsBlock>
<SettingsBlock label="Username" link="username">
<p className="readOnlySettingField ReadUsername">www.squelo.com/hilarl<a href="#">Edit</a></p>
<div className="WriteUsername">
<p className="notice url">squelo.com/hilarl</p>
<Input placeholder="Username" classes="col-md-7" />
<p className="notice"><strong>Please note:</strong> Your username can only be changed once and should include your authentic name.</p>
<button className="button small fill primary">Save Changes</button>
<button className="button small default">Cancel</button>
</div>
</SettingsBlock>
<SettingsBlock label="Email" link="email">
<p className="readOnlySettingField ReadEmail">hilal@gmail.com<a href="#">Edit</a></p>
<div className="WriteEmail">
<Input placeholder="Email" classes="col-md-9" />
<p className="notice"><strong>Please note:</strong> Your username can only be changed once and should include your authentic name.</p>
<button className="button small fill primary">Save Changes</button>
<button className="button small default">Cancel</button>
</div>
</SettingsBlock>
<SettingsBlock className="Password" label="Password" link="password">
<p className="readOnlySettingField ReadPassword">Password last changed over a year ago<a href="#">Edit</a></p>
<div className="WritePassword">
<SubBlock label="Current" placeholder="Current" />
<SubBlock label="New" placeholder="New" />
<SubBlock label="Re-type new" placeholder="Re-type new" />
<p className="notice"><a href="#">Forgot password?</a></p>
<button className="button small fill primary">Save Changes</button>
<button className="button small default">Cancel</button>
</div>
</SettingsBlock>
</div>
);
}
}
Would be great if somebody could give an example for how to achieve this in this situation. 如果有人能给出在这种情况下如何实现此目标的示例,那就太好了。 I have been wasting a lot of time figuring this out myself and this is the first time I am using ReactJs in a project.
我一直在浪费很多时间自己弄清楚这个问题,这是我第一次在项目中使用ReactJs。 Thanks.
谢谢。
This is the pattern I would use. 这就是我要使用的模式。
render() {
var hideWriteBlock = (show hide logic);
var hideReadBlock = (show hide logic);
return (
<div className="ProfileSettings">
<SettingsBlock className="Names" label="Name" link="name" hide={hideWriteBlock}>
In the settings component; 在设置组件中;
render() {
if (this.props.hide) return null;
return (
<div>
{this.props.children}
</div>
)
}
I use hide so that I don't have to write if (!this.props.show) return null;. 我使用hide,所以我不必写if(!this.props.show)返回null;。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.