Question

我想通过单击复选框输入将字体粗细从正常更改为粗体。

我尝试应用三元运算符，但它不起作用。

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

实现此功能的最佳方法是什么？

这是codepen demo。

代码

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

感谢您的善意。

Answer 1

将$ cat tst.awk { while ( match($3,/>\.*</) ) { tgt = substr($3,RSTART,RLENGTH) gsub(/./,"L",tgt) $3 = substr($3,1,RSTART-1) tgt substr($3,RSTART+RLENGTH) } print } $ awk -f tst.awk file field1 field2 >>>>>.>............>>LLLLLLLLLLL<<.......>>>LLLLLLLLL<<<.<.<<<<<.更改为以下内容：

<span id="textSpan">

Answer 2

在元素内联或CSS标识符中使用 fontWidth 。

<i className={ `fa fa-${ notif.icon }` } style={{color:`${notif.color}`, fontSize: '15px', marginRight: '0.5rem', fontWeight: 'bold'}}></i>

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

2 个答案: