Reactjs 使用if/else语句一次更改多个事件

我使用1-5的引导形式滑块来描述从好到坏的情况。在滑块更改上，我希望它包含两个函数；一个用于更改状态中的数字，然后一个用于标识与数字匹配的正确文本，并在用户滑动滑块时显示。我尝试过几种不同的方法，但似乎都不管用。我们还欢迎以其他方式共同组成职能或国家。提前谢谢

class ConditionSlider extends Component {
     constructor (props) {
         super(props);
         this.state = {
             condition: 1
         };
     };

render() {

const slideCalls = (e) => {
    slideChangeState(e);
    conditionText(e)
    };

const slideChangeState = (e) => {
    this.setState({
        condition: e
        })
    }

let spanText;
const conditionText = (e) => {
    if(e === '1' ) {
        spanText = <div>Very Poor</div>
    } else if (e === '2') {
        spanText = <div>Poor</div>
    } else if (e === '3') {
        spanText = <div>Okay</div>
    } else if (e === '4') {
        spanText = <div>Good</div>
    } else if (e === '5') {
        spanText = <div>Excellent</div>
    }
}


console.log(this.state.condition)

return (
    <div className="slide-class">
    <RangeSlider 
        value={this.state.condition}
        onChange={e => slideCalls(e.target.value)}
        min={1}
        max={5}
        step={1}
        size='sm'
        tooltip='off'
        variant='primary'
        />
        <p>{this.spanText}</p>
        <p>{spanText}</p>
    </div>
    )}
};

类条件滑块扩展组件{
建造师（道具）{
超级（道具）；
此.state={
条件:1
};
};
render（）{
常量slideCalls=（e）=>{
slideChangeState（e）；
条件文本（e）
};
常量slideChangeState=（e）=>{
这是我的国家({
条件：e
})
}
让我们来看看文本；
常量条件文本=（e）=>{
如果（e=='1'）{
spanText=非常差
}如果（e=='2'）{
spanText=差
}如果（e=='3'）{
spanText=好的
}如果（e=='4'）{
spanText=好
}如果（e=='5'，则为else{
spanText=非常好
}
}
console.log（this.state.condition）
返回(
slideCalls（e.target.value）}
min={1}
max={5}
步骤={1}
size='sm'
工具提示=“关闭”
variant='primary'
/>
{this.spanText}

{spanText}

)}
};

您需要先修改几件事情才能使其正常工作。首先，渲染函数不应包含这两个函数。然后，您可以拥有一个对象，其中包含作为键（1到5）的数字以及与该数字相关的字符串（差、卓越等），这样您就不会返回到一个大的

if…else

语句

就这样吧：

const RANGES = {
  1: "Very Poor",
  2: "Poor",
  3: "Okay",
  4: "Good",
  5: "Excellent",
}

class ConditionSlider extends Component {
     constructor (props) {
         super(props);
         this.state = {
             condition: 1
         };
     };
slideCalls(e) {
    slideChangeState(e);
    conditionText(e)
    };

slideChangeState(e) {
    this.setState({
        condition: e
        })
    }

render() {

return (
    <div className="slide-class">
    <RangeSlider 
        value={this.state.condition}
        onChange={e => slideCalls(e.target.value)}
        min={1}
        max={5}
        step={1}
        size='sm'
        tooltip='off'
        variant='primary'
        />
        <p>{RANGES[this.state.condition]}</p> // removed <div> here since you cant have a div inside a <p> element. I mean, you could but it would display an error in the console
        <p>{spanText}</p>
    </div>
    )}
};

常数范围={
1:“很穷”，
2:“穷人”，
3:“好的”，
4:“好”，
5:“好极了”，
}
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
条件:1
};
};
slideCalls（e）{
slideChangeState（e）；
条件文本（e）
};
slideChangeState（e）{
这是我的国家({
条件：e
})
}
render（）{
返回(
slideCalls（e.target.value）}
min={1}
max={5}
步骤={1}
size='sm'
工具提示=“关闭”
variant='primary'
/>
{RANGES[this.state.condition]}
//此处已删除，因为在元素中不能有div。我的意思是，您可以，但它会在控制台中显示错误
{spanText}

)}
};

我正在给这个盲人编码，但这就是我处理这种情况的方法。如果您使用状态来管理滑块的值，那么您也可以使用状态来保存文本值

我已将函数移到render方法之外，并且由于

slideChangeState

需要访问

this

我已将其绑定到构造函数中

我希望这有帮助-以前从未使用过此控件

class ConditionSlider extends Component {
    constructor(props) {
        super(props);
        this.state = {
            condition: 1,
            spanText: "Very Poor"
        };
        this.slideChangeState = this.slideChangeState.bind(this);
    };

    slideChangeState(value) {
        var spanText = conditionText(value);
        this.setState({
            condition: value,
            spanText: spanText
        })
    };

    conditionText(value) {
        switch (value) {
            case 1:
                return "Very Poor";
            case 2:
                return "Poor";
            case 3:
                return "Okay";
            case 4:
                return "Good";
            case 5:
                return "Excellent"
        }
    }

    render() {
        return (
            <div className="slide-class">
                <RangeSlider
                    value={this.state.condition}
                    onChange={e => slideCalls(e.target.value)}
                    min={1}
                    max={5}
                    step={1}
                    size='sm'
                    tooltip='off'
                    variant='primary'
                />
                <p>{this.state.spanText}</p>
            </div>
        )
    }
};

类条件滑块扩展组件{
建造师（道具）{
超级（道具）；
此.state={
条件:1,，
spanText：“非常差”
};
this.slideChangeState=this.slideChangeState.bind（this）；
};
slideChangeState（值）{
var spanText=条件文本（值）；
这是我的国家({
条件：价值，
spanText:spanText
})
};
条件文本（值）{
开关（值）{
案例1：
返回“非常差”；
案例2：
返回“穷人”；
案例3：
返回“好”；
案例4：
返回“好”；
案例5：
返回“优秀”
}
}
render（）{
返回(
slideCalls（e.target.value）}
min={1}
max={5}
步骤={1}
size='sm'
工具提示=“关闭”
variant='primary'
/>
{this.state.spanText}

)
}
};

Hmmm。。。我试着在这里切换一些东西，但我认为它在var spanText=conditionText（value）时总是出错。你能给一个函数分配一个变量吗。可能应该是“=this.conditionText（value）”。很高兴你得到了一个有效的解决方案谢谢！这对我来说确实有效，我只需完全删除“slideCalls”函数，只需调用“This.slideChangeState（e.target.value）”。谢谢