根据react的值显示文字select

Question

我想根据在我的 react-select 中编辑的值 select 显示不同的文本。 handlechange time 工作正常，我的问题是当我尝试检索 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

这里有两个问题：

选项和选项值之间的混淆
混淆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>
        )}
      </>
    );
  }
}

根据react的值显示文字select

Display text according to the value of react select

state

reactjs

react-select

期权与价值

数字与字符串