带有 if/else 语句的多个事件 onChange

Question

我使用 bootstrap 表单滑块从 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>
    )}
};

Answer 1

您需要先修改几处才能使其正常工作。首先，渲染函数不应该包含这两个函数。然后，您可以拥有一个包含数字作为键（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>
    )}
};

Answer 2

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

我已将函数移到 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>
        )
    }
};

带有 if/else 语句的多个事件 onChange

Multiple Events onChange with if/else statement

if-statement

slider

reactjs