Reactjs 使用'；隐藏=真'；通过更改React.JS中的状态显示值

我正在制作一个React.js应用程序。我无法找到将隐藏输入更改为显示的方法，因此我决定在此处发布一个问题

我要实现的功能包括：

如果单击文本，则会出现一个复选框。此复选框为

input

，标记内有

hidden=true

据我所知，我们可以使用三元运算符来更改JSX标记内部的样式。然而，三元运算符不适用于隐藏元素

这是

代码

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'));

class FontChooser扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
隐藏：真的
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
这是我的国家({
隐藏：！this.state.hidden
})
}
render（）{
返回(
{this.props.text}
);
}
}
反应(
,
document.getElementById（'container'）；

谢谢你的帮助

而不是

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

你应该

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

而不是

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

你应该

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

---

你有一对多余的{}

如果您这样做，它应该可以工作：

---

hidden={！this.state.hidden？true:false}

您有一对额外的{}

如果您这样做，它应该可以工作：

---

hidden={！this.state.hidden？true:false}

您是否尝试使用

false

和

true

值而不是字符串值？字符串是真实的。您是否尝试使用

false

和

true

值而不是字符串值？弦是真实的。哦。。！我只是添加了与内联样式相同的括号。成功了！我会在6分钟后给它打分。非常感谢。hidden={！this.state.hidden？true:false}等于hidden={！this.state.hidden}.ohh。。！我只是添加了与内联样式相同的括号。成功了！我会在6分钟后给它打分。非常感谢。hidden={！this.state.hidden？true:false}等于hidden={！this.state.hidden}。为什么不使用hidden？像nick answer一样，使用类型时，您需要知道每个输入的类型input@stackdave这里有点晚了，但是

hidden

element属性完全隐藏了视图中的元素，使其实际上不存在。带有

type=“hidden”

的

输入将仍然是表单的一部分，其值将被发送。这取决于需要什么。为什么不使用隐藏？像nick answer一样，使用类型时，您需要知道每个输入的类型input@stackdave这里有点晚了，但是
hidden
element属性完全隐藏了视图中的元素，使其实际上不存在。带有
type=“hidden”
的
输入将仍然是表单的一部分，其值将被发送。这将取决于需要什么。