如何从下拉菜单中获取价值？

Question

我正在使用反应JS，我有一个问题。我不知道如何从我的下拉列表中获取值并将该值放入onclick按钮。我已经阅读了很多主题，但我没有找到像我这样的初学者真正有用的东西。

我正在使用“调度程序”来帮助我构建我的下拉列表和其他一些东西。

所以，我的下拉列表从本地文件中获取数据，如下所示：

{values.map(v => (
                <option value={this.value}>{v.value}</option>
              ))}
              console.log(ref)

我的按钮是这样的：

<Button onClick={() => this.decrement()}>
            Ajouetr la réservation
          </Button>

减量方法仅用于测试它是否正常工作，而且确实如此。

实际上，我想要做的很简单：我的下拉列表中有一些值（从1到7）。我有一个州说有30个地方可用。我想要的是当我在下拉列表中选择一个指定项目并使用我的按钮验证然后我的状态以指定的数字递减。因为现在它只减1。

我希望有一个人可以帮助我，因为我花了两天时间解决这个问题而且我不知道该怎么做。

谢谢 ：）

Answer 1

下一次，很高兴为您的问题提供一个交互式示例。这是我做的CodeSandbox（我希望）说明你的例子(link)。如果你想摆弄这个例子，只需点击右上角的“Fork”即可。

回到解决方案：我认为您所缺少的是将所选值与30个“位置”一起存储在您的州中。你想要的是让你的<select />标签成为“受控组件”。当某人与<select />交互时，您想要更改内部状态，使其与所选值匹配。这样，当你从你的按钮调用decrement()时，你可以使用内部状态的值，而不是从ref获取它（我认为这是你想要做的）。

这里是React doc的链接，它解释了如何使用表单，特别是<select />标签：(link)。

照顾自己！

Answer 2

我会说你可以在两个不同的步骤中考虑这个问题：

设定数量状态

1. 使用当前下拉值设置状态 - 为实现此目的，您只需在选择中使用onChange方法：

   <select   name="quantity"
             value={this.state.quantity}
             onChange={this.onSelectQuantity}
           >

2. 在构造函数中，在州内创建变量quantity
3. 创建一个名为onSelectQuantity的函数，您将使用setState设置数量状态。
4. 不要忘记在构造函数上绑定函数onSelectQuantity。

有了这个，每次更改select值时，您的状态都会捕获其值。如果要测试它是否有效，可以从函数中记录它。

按钮的减少

在此之后，您可以再次从减量函数减少状态的值

    <Button onClick={this.decrement}>
                Ajouetr la réservation
              </Button>

你将有一个功能......

decrement() {
  const newQuantity = this.state.quantity - 1;
  this.setState({
     quantity: newQuantity
  })
}

希望能帮助到你！