学习者问题：一种根据状态有条件地设置一组字段样式的方法

Question

我有一组使用 MS Fabric UI 的字段，如果 radioButton 被选中与否，我想对其进行模糊处理。

字段都在一个组件中。

代码如下：

<div className={this.state.BlurOrNot === null ? stylesEvalReq.blurText : stylesEvalReq.noBlurText}>
     <br />
       <div>
       <Label className={stylesEvalReq.questionTitle1}>Job Code and Position Details</Label>
       </div> ETC..

我有这个功能，当单选按钮被选中和更改时会触发：

private _evalTypeChange = (ev: React.FormEvent<HTMLInputElement>, option: any) => {
    this.setState({
      EvalType: option.text
    });
    if(option.text === 'New'){
      this.setState({IsEvalTypeDisabled: false});
    } else if(option.text === 'Re-evaluation') {
      this.setState({IsEvalTypeDisabled: true});
    } else if(option.text === 'Appeal') {
      this.setState({IsEvalTypeDisabled: true});
    }

      if(this.state.EvalType === null) {
       this.setState({
        BlurOrNot: true
       }, () => {console.log(this.state.BlurOrNot+'BlurOrNot if null');});
       return <div className={stylesEvalReq.blurText} />;
      } else if (this.state.EvalType === 'New') {
        this.setState({
        BlurOrNot: false
        },() => {console.log(this.state.BlurOrNot+'BlurOrNot if New'+this.state.EvalType+'evaltype');});
      } else if (this.state.EvalType === 'Re-evaluation') {
        this.setState({
        BlurOrNot: false
        }, () => {console.log(this.state.BlurOrNot+'BlurOrNot if Re-evaluation'+this.state.EvalType+'evaltype');});
      } else if (this.state.EvalType === 'Appeal') {
        this.setState({
        BlurOrNot: false
        }, () => {console.log(this.state.BlurOrNot+'BlurOrNot if Appeal'+this.state.EvalType+'evaltype');});
    } 
  }

But it's not working because the blurred fields are showing correctly when the radio button is blank but when the New radio button is selected the fields disappear completely.我相信它可能是使用先前选择的 setState？

谁能告诉我哪里出错了？

解决后编辑：BlurOrNot 是一个设置为 null 的布尔值。这个很重要！ :) 以及下面 Saqib 的回答。

Answer 1

举个例子，如果 BlurOrnot 为真，将应用的 class 是 stylesEvalReq.blurText，否则将应用 stylesEvalReq.NotblurText class。

这个三元运算符是制作条件样式的方法。

className={this.state.BlurOrNot?stylesEvalReq.blurText:stylesEvalReq.NotblurText}

学习者问题：一种根据状态有条件地设置一组字段样式的方法

Learner Question: A way to conditionally style a set of fields based on state

reactjs

spfx