0

这是我的选择表格：

<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');
}

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

起初我尝试在我的选择元素而不是表单中使用 ref，但是当我单击按钮时，它给了我一个错误，说函数 click 不存在所以我将 ref 移动到包含它的表单元素，现在我是没有得到那个错误，但它仍然没有打开。

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

有任何想法吗？

4

1 回答 1

0

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

const skuSelectRef = createRef();

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

<select ref={skuSelectRef} ....

代码沙盒链接

如果你想打开选择元素，那就很难了。没有open()像 for 那样的方法focus()。关于如何在这个问题上进行整个讨论。但我建议你不要重新发明轮子。有很多用于表单和 UI 组件的库可以通过boolean openprop 来实现。Material UI 是最大的 UI 之一。 这是他们的受控开放演示。

于 2020-10-24T00:58:10.430 回答