根据react select的值显示文本

Question

我想根据我在 react-select 中选择的值显示不同的文本。 handlechange 时间工作正常，我的问题是当我尝试检索 p 标签中的值以根据值显示不同的文本时

我的代码：

const timeSlots = [
    {
        value: 0,
        label: 'what is your choice ?'
    },
    {
        value: 1,
        label: 'choice 1'
    },
    {
        value: 2,
        label: 'choice 2'
    },
    {
        value: 3,
        label: 'choice 3'
    },
    {
        value: 4,
        label: 'choice 4'
    }
]

class WidgetBooking extends Component {

    state ={
        selectedOption: null,
    }
    
    handleChangeTime = (selectedOption) => {
        this.setState({ selectedOption });
        console.log(selectedOption);
    }

    
    
    render() {
        const { selectedOption } = this.state;
        return (
            <>
                    <div className="time-slots padding-bottom-30px">
                        <Select
                            value={selectedOption}
                            onChange={this.handleChangeTime}
                            placeholder="what is your choice ?"
                            options={timeSlots}
                        />
                    </div>
                    {selectedOption === '1' &&
                        <p className="d-block widget-title">756, 23 $</p>
                    }
                    {selectedOption === '2' &&
                        <p className="d-block widget-title">865, 23 $</p>
                    }
                    {selectedOption === '3' &&
                        <p className="d-block widget-title">756, 23 $</p>
                    }
                </div>
            </>
        );
    }
}

我想在 p 标签中显示不同的价格，如上图所示。 感谢您的帮助

Answer 1

这里有两个问题：

1. 期权与期权价值之间的混淆
2. string 和 number 之间的混淆

选项与价值

当您在handleChangeTime 中调用console.log(selectedOption) 时，您会看到什么？我看到一个看起来像{value: 2, label: "choice 2"} 的完整选项对象。这就是您要保存到this.state.selectedOption 的内容。但是，当您在 render 中比较它时，您会期望 this.state.selectedOption 是像 '1' 或 '2' 这样的数字字符串——而不是对象。

setState 中的任何一个都可以，但你必须保持一致，否则你将永远无法匹配。如果你想保持handleChangeTime 不变，那么你的渲染检查需要看起来像selectedOption?.value === 1。如果你想保持你的render() 不变，那么你需要设置像this.setState({ selectedOption: selectedOption.value.toString() }) 这样的状态。 toString() 将我们带到下一个问题。

数字与字符串

比较值时，number 1 和 string '1' 不一样。如果您直接处理 DOM select 元素，您可能会得到 string 值。但是react-select 包调用onChange，选项格式与您提供的格式相同。在这种情况下，您的value 属性是number。同样重要的是一致性。我建议您在任何地方都将其保留为number，并将您的渲染条件从selectedOption === '1' 更改为selectedOption === 1。

更正的代码：

import React, { Component } from "react";
import Select from "react-select";

const timeSlots = [ /* ... */ ];

class WidgetBooking extends Component {
  state = {
    selectedOption: null // will be a number or null
  };

  handleChangeTime = ({ value }) => { // destructure to get just the value
    this.setState({ selectedOption: value });
  };

  render() {
    const { selectedOption } = this.state;
    return (
      <>
        <div className="time-slots padding-bottom-30px">
          <Select
            value={selectedOption}
            onChange={this.handleChangeTime}
            placeholder="what is your choice ?"
            options={timeSlots}
          />
        </div>
        {selectedOption === 1 && (
          <p className="d-block widget-title">756, 23 $</p>
        )}
        {selectedOption === 2 && (
          <p className="d-block widget-title">865, 23 $</p>
        )}
        {selectedOption === 3 && (
          <p className="d-block widget-title">756, 23 $</p>
        )}
      </>
    );
  }
}