通過傳遞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中的值使字體粗體粗體

回答

相關問題