Question

我正在使用React 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。

我希望有人帮助我很清楚，因为我花了2天的时间解决这个问题，我也不知道该怎么办。

谢谢：）

Answer 1

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

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

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

保重！

Answer 2

我想您可以通过两个不同的步骤来思考这个问题：

设置数量状态

使用当前下拉列表值设置状态-为此，您可以在 select 中使用 onChange 方法：

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

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

这样，每次更改select的值时，状态都会捕获其值。如果要测试它是否可以运行，可以从该函数中记录它。

按钮下降

此后，您只需通过减量功能再次减小状态值

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

您将拥有一个功能...

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

希望有帮助！

如何从下拉菜单获得价值？

2 个答案: