时间戳

首页 > 解决方案 > 在 REACTjs 中选中复选框时如何隐藏段落？

reactjs - 在 REACTjs 中选中复选框时如何隐藏段落？

问题描述

我是 REACT 的新手。我创建了一个包含几个组件的表单。在其中一个组件中，我有一个复选框和一个带有文本的段落。单击复选框时，我不知道如何隐藏段落。布尔值是在状态中捕获的，但不确定如何使用它来做我想做的事。

class Anonymous extends React.Component{
  constructor(){
  super();
  this.state = {
  anon:false
}
  this.anonymousBox = this.anonymousBox.bind(this)
}

anonymousBox(event){
  this.setState({anon:event.target.checked})
}

render(){
  return(
  <span>
  <input type="checkbox" 
    name="anon" value="" 
    onChange={this.anonymousBox}
    checked={this.state.anon}
  /> Anonymous

  <p style={{backgroundColor:'yellow'}}>
    First Name: <br />
    Last Name: <br />
    Email: <br />
    Country: <br />
    Phone: <br />
  </p>
 </span>
  )
 }
}

密码笔

标签： reactjs

解决方案

您可以根据状态有条件地呈现段落，如下所示：

{this.state.anon && <p style={{backgroundColor:'yellow'}}>
  First Name: <br />
  Last Name: <br />
  Email: <br />
  Country: <br />
  Phone: <br />
</p>}

这与这种条件渲染风格类似（参见下面 Drew 的评论）：

{this.state.someBoolean ? <p>Some text</p> : null}

即，如果满足条件而不是渲染这段 jsx，则不渲染任何内容。

另一种选择是使用display: none属性切换 CSS 类。看起来像这样：

<p className={this.state.anon ? "show" : "hide"} style={{backgroundColor:'yellow'}}>
  First Name: <br />
  Last Name: <br />
  Email: <br />
  Country: <br />
  Phone: <br />
</p>

当然，您需要相应的 CSS 类来完成这项工作。
您还可以在内联样式中使用三元条件：

<p style={{ backgroundColor:'yellow', display: this.state.anon ? 'block' : 'none' }}>
  First Name: <br />
  Last Name: <br />
  Email: <br />
  Country: <br />
  Phone: <br />
</p>

在最后两个选项中，您可以替换display: none为visibility: hiddenwhich行为不同。

您可以在 React 文档中阅读更多关于在 jsx 中使用三元运算符进行条件渲染的信息。

哪个选项更好取决于用例，所以这取决于你！

希望这会有所帮助，祝你好运！

推荐阅读