Question

我正在寻找帮助在呈现页面之前将属性从字符串转换为布尔值。粗体属性将被设置为＆＃39; true＆＃39;或者＆＃39; false＆＃39;。我已经设置了属性的状态，但字符串是＆＃39; false＆＃39;仍然是真的。我目前正在尝试在我的handleClick函数中转换为布尔值，但我需要在呈现页面之前进行转换。

HTML

<script type="text/jsx">

ReactDOM.render(
 <div>
 <FontChooser min='4' max='40' size='16' text='Fun with React!' bold='true'/>
</div>, document.getElementById('container'));

</script>

JS

class FontChooser extends React.Component {

constructor(props) {
super(props);
this.state = {hidden: 'true', size: this.props.size, bold: this.props.bold, min : this.props.min, max: this.props.max, color: 'black'}; 

}


handleClick() {
    if(this.state.hidden == 'true') {
        if(this.props.bold == "true") {
            this.setState({bold: true}) 
        } else {
            this.setState({bold: false})
        }

        this.setState({hidden: ''});

    }
    else {
        this.setState({hidden: 'true'});    
    }           
}

decrease() {
    if (this.state.size >= Number(this.state.min) +1) 
    this.setState({size: Number(this.state.size) -1});

    if(this.state.size == Number(this.state.min) +1|| this.state.size == Number(this.state.min)) {
        this.setState({color: 'red'})
    } else {
        this.setState({color: 'black'})
    }
}

increase() {
    if (this.state.size <= Number(this.state.max) -1)       
    this.setState({size: Number(this.state.size) +1});  

    if(this.state.size == Number(this.state.max) -1|| this.state.size == Number(this.state.max)) {
        this.setState({color: 'red'})
    } else {
        this.setState({color: 'black'})
    }


}

toggle() {
    this.setState({bold: !this.state.bold});
}





render() {

    var weight = this.state.bold ? 'bold' : 'normal';       
    var checked = this.state.bold ? 'true' : '';

    var inlineStyle = {
        fontSize: this.state.size,
        fontWeight: weight,         
    };

    var fontSizeSpanStyle = {
        color: this.state.color
    }





return(

       <div>
       <input type="checkbox" id="boldCheckbox" checked={checked} hidden={this.state.hidden}onClick={this.toggle.bind(this)} />
       <button id="decreaseButton" hidden={this.state.hidden} onClick={this.decrease.bind(this)} >-</button>
       <span id="fontSizeSpan" hidden={this.state.hidden} style={fontSizeSpanStyle} >{this.state.size}</span>
       <button id="increaseButton" hidden={this.state.hidden} onClick={this.increase.bind(this)} >+</button>
       <span id="textSpan" onClick={this.handleClick.bind(this)} style={inlineStyle} >{this.props.text}
       </span>       
       </div>
);
}
}

Answer 1

您从道具中获取粗体作为字符串，但您可以在最初设置组件状态时直接更改它

因此，在设置bold状态时，您只需将其转换为布尔值

bold: (this.props.bold == "true" ? true : false)

我还有一个评论，你应该避免从构造函数访问道具你应该访问componentWillMount函数中的道具

使用已应用的更改检查以下代码：

class FontChooser extends React.Component {

constructor(props) {
super(props);
   this.state = {};
}

componentWillMount(){
    this.setState({hidden: 'true', size: this.props.size, bold: (this.props.bold == "true" ? true : false) , min : this.props.min, max: this.props.max, color: 'black'}); 
}


handleClick() {
    if(this.state.hidden == 'true') {
        if(this.props.bold == "true") {
            this.setState({bold: true}) 
        } else {
            this.setState({bold: false})
        }

        this.setState({hidden: ''});

    }
    else {
        this.setState({hidden: 'true'});    
    }           
}

decrease() {
    if (this.state.size >= Number(this.state.min) +1) 
    this.setState({size: Number(this.state.size) -1});

    if(this.state.size == Number(this.state.min) +1|| this.state.size == Number(this.state.min)) {
        this.setState({color: 'red'})
    } else {
        this.setState({color: 'black'})
    }
}

increase() {
    if (this.state.size <= Number(this.state.max) -1)       
    this.setState({size: Number(this.state.size) +1});  

    if(this.state.size == Number(this.state.max) -1|| this.state.size == Number(this.state.max)) {
        this.setState({color: 'red'})
    } else {
        this.setState({color: 'black'})
    }


}

toggle() {
    this.setState({bold: !this.state.bold});
}





render() {

    var weight = this.state.bold ? 'bold' : 'normal';       
    var checked = this.state.bold ? 'true' : '';

    var inlineStyle = {
        fontSize: this.state.size,
        fontWeight: weight,         
    };

    var fontSizeSpanStyle = {
        color: this.state.color
    }





return(

       <div>
       <input type="checkbox" id="boldCheckbox" checked={checked} hidden={this.state.hidden}onClick={this.toggle.bind(this)} />
       <button id="decreaseButton" hidden={this.state.hidden} onClick={this.decrease.bind(this)} >-</button>
       <span id="fontSizeSpan" hidden={this.state.hidden} style={fontSizeSpanStyle} >{this.state.size}</span>
       <button id="increaseButton" hidden={this.state.hidden} onClick={this.increase.bind(this)} >+</button>
       <span id="textSpan" onClick={this.handleClick.bind(this)} style={inlineStyle} >{this.props.text}
       </span>       
       </div>
);}
}

Answer 2

如果你真的想（或有）使用字符串值，可能最简单的方法是：

constructor() {
  this.state = {
    ...
    bold: this.props.bold === 'true',
  }
}

然后在每个bold更改：

this.setState({
  bold: !this.state.bold,
})

我强烈建议使用这些属性（粗体，隐藏...）作为布尔道具。

如果“bold”属性设置为“true”，则文本应以粗体显示

2 个答案: