通过传递React.js中的值使字体粗体粗体

我想通过单击复选框输入将字体权重从正常改变为粗体。通过传递React.js中的值使字体粗体粗体

我试图应用三元运算符，但它没有奏效。

bold={ this.state.checkboxState ? this.props.bold : !this.props.bold }

什么是实现这一功能的最好方法是什么？

代码

class FontChooser extends React.Component { 
constructor(props) { 
super(props); 
this.state = { 
    hidden: true, 
    checkboxState : true 
} 
} 
toggle(e) { 
    this.setState({ 
     checkboxState : !this.state.checkboxState 
    }) 
    console.log(!this.state.isChecked) 
} 

render() { 
return(
     <div> 
     <input type="checkbox" 
      id="boldCheckbox" 
      checked={this.state.isChecked} 
      onClick={this.toggle.bind(this)} 
         /> 
     <span id="textSpan" bold={ this.state.checkboxState ? this.props.bold : !this.props.bold }>{this.props.text}</span> 
     </div> 
); 
} 
} 

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

谢谢你样的建议。

来源

2017-10-06 aaayumi

更改<span id="textSpan">以下几点：

<span id="textSpan" style={ this.state.checkboxState ? {fontWeight: 'normal'} : {fontWeight: 'bold'} }>{this.props.text}</span>

来源

2017-10-06 21:19:12 wlh

感谢。我也想出了这个解决方案。我想知道的是使用“粗体”和布尔值。我想改变'bold ='false'。 – aaayumi

因此，在您的输入中，您将选中的值设置为“this.state.isChecked”，但您永远不会更改此值。你是否想要使用'this.state.checkboxState'？其次，当您在'React.render'的'FontChooser'元素上设置粗体属性的值时，将其从'bold ='false''更改为'bold = {false}'。这种方式将值作为布尔值传递，您可以使用已经使用的三元语句轻松更改值。 – wlh

感谢您的建议。它以这种方式工作。 – aaayumi

通过传递React.js中的值使字体粗体粗体

回答

相关问题