为什么“隐藏”没有添加到输入标签中?
class FontChooser extends React.Component {
constructor(props) {
super(props);
this.state = { hidden: true };
}
render() {
console.log(this.state.hidden);
return (
<div>
<input type="checkbox" id="boldCheckbox" {this.state ? 'hidden':'';} />
<button id="decreaseButton" hidden='true'>-</button>
<span id="fontSizeSpan" hidden="true">
{this.props.size}
</span>
<button id="increaseButton" hidden="true">
+
</button>
<span id="textSpan">{this.props.text}</span>
</div>
);
}
}
这是我的 html:
<html>
<head>
<title>Font Chooser</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="FontChooser.js" type="text/jsx"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
ReactDOM.render(
<div>
<FontChooser min='4' max='40' size='16' text='Fun with React!' bold='false'/>
</div>,
document.getElementById('container'))
;
</script>
</body>
</html>