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

但是它不起作用，因为当单选按钮为空白时，模糊的字段正确显示，但是当选择“新建”单选按钮时，这些字段完全消失了。我相信可能是使用先前选择的setState吗？

有人可以告诉我我要去哪里了吗

解决后编辑：BlurOrNot是设置为null的布尔值。这个很重要！：）以及下面萨奇布的答案。

Answer 1

仅举一个例子，如果BlurOrnot为true，则将应用的类为stylesEvalReq.blurText，否则将应用stylesEvalReq.NotblurText类。

此三元运算符是创建条件样式的方式。

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

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

1 个答案: