通过在React.JS中更改状态来显示带有'hidden = true'值的输入

Question

我正在制作一个React.js应用程序。我找不到改变隐藏输入的方法来显示所以我决定在这里发一个问题。

我想实现的功能：

如果单击文本，则应显示一个复选框。此复选框为input，标记内有hidden=true。

只要我知道，我们可以使用三元运算符来更改JSX标记内的样式。但是三元运算符不适用于隐藏元素。

这是codepen demo。

代码

class FontChooser extends React.Component {
constructor(props) {
super(props);
this.state = {
    hidden: true
}
this.handleClick = this.handleClick.bind(this);
}

handleClick(){
    this.setState({
        hidden: !this.state.hidden
    })
}

render() {
return(
       <div>
       <input type="checkbox" 
           id="boldCheckbox"
           hidden={{ !this.state.hidden ?  'false' : 'true' }}  
           />
        <span id="textSpan" onClick={this.handleClick}  >
       {this.props.text}              
       </span>
       </div>
      );
   }
 }

 React.render(
 <div>
 <FontChooser min='4' max='40'  text='Fun with React!' bold='false'/>
 </div>,
 document.getElementById('container'));

感谢您的帮助！

Answer 1

你有一对额外的{}

如果你这样做，它应该有效：

hidden={ !this.state.hidden ? true : false }

Answer 2

而不是

hidden={{ !this.state.hidden ?  'false' : 'true' }} 

你应该

type={!this.state.hidden ?  'hidden' : 'checkbox'}