如何在React中单击另一个按钮时触发打开选择表单的选项？我尝试使用裁判，但无法正常工作

问题描述

这是我的选择表格：

<form ref={skuSelectRef}>
    <label htmlFor="size" />
    <select
        id="size"
        value={selectedSKU}
        onChange={() => changeSKU(size.options[size.selectedindex].value)}
    >
        <option value="default">
            {outOfStock ? 'OUT OF STOCK' : 'SELECT SIZE'}
        </option>
        {availableSizes.map((size,i) => (
            <option key={i} value={size}>
                {size}
            </option>
        ))}
    </select>
</form>

当我单击该按钮时，我想打开上面的选择表单：

<div className="a2cbtn">
    <button onClick={onAddToCartClick} id="a2cbtn">
        <span>ADD TO CART</span>
    </button>
</div>

以上两个组件都在我的AddToCart子组件中。这是父组件中的按钮单击处理程序的一小段，我试图在其中打开选择表单：

if (this.state.selectedSKU === 'default') {
    this.skuSelectRef.current.click();
    console.log(this.skuSelectRef);
    console.log('clicked');
}

似乎已正确创建了引用，因为我正在{current: form}登录到控制台，并且单击也有效，因为我也正在“单击”登录到控制台。但是选择表单没有打开！

起初，我尝试在我的select元素（而不是form）中使用ref，但是当我单击按钮时，它给了我一个错误，提示函数单击不存在，因此我将ref移到了将其包围的form元素中。现在我没有得到那个错误，但是它仍然没有打开。

我也尝试过this.skuSelectRef.current.focus()和this.skuSelectRef.current.select()，但无济于事。

有什么想法吗？

解决方法

如果您想在点击按钮时聚焦所选内容，可以使用裁判来完成。它对您不起作用，因为您将ref附加到form元素上，并且需要直接将其附加到select元素上。

const skuSelectRef = createRef();

const onAddToCartClick = () => {
    if (size === "default") {
        skuSelectRef.current?.focus();
    }
};

<select ref={skuSelectRef} ....

CodeSandbox Link

如果要打开选择元素，那很困难。没有像open()那样的focus()方法。关于如何进行on this question的整个讨论。但是我建议您不要重新发明轮子。有许多用于表单和UI组件的库可以通过boolean open道具来实现。材质UI是最大的UI之一。 Here是他们受控开放的演示。