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

Question

我是 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>
  )
 }
}

codepen

Answer 1

您可以像这样根据状态有条件地渲染段落：

{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: hidden 其中behaves differently。

您可以在conditional rendering 的 React 文档中阅读有关在 jsx 中使用三元运算符的更多信息。

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

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