如何为动态创建的组合框定义“ref”

Question

我是一名老程序员，但对 javascript 很陌生。我正在开发一个小型电子商务应用程序。我的产品或项目最多有二十个自定义用户定义的属性。例如，“螺钉”类别有两个自定义属性“长度”和“螺纹”。

我为每个活动的自定义属性动态创建一个组合框过滤器。我添加了一个按钮，单击该按钮时需要将所有动态创建的组合框过滤器重置回“任意”。

如果我的组合框是静态定义的，这就是我试图实现的基本思想：

import React from 'react';
import Combobox from "react-widgets/Combobox";

class Sample extends React.Component {
    constructor() {
        super();
        this.combo1 = React.createRef();
        this.combo2 = React.createRef();
    }    

    render() {
        let buttonClick = () => {
            this.combo1.current.value = "Any";
            this.combo2.current.value = "Any";
        }

        return (
            <div>
                <button onClick={() => buttonClick() }>Reset Filters</button>
                <Combobox data={["Any", "1 1/2", "1 1/4"]} ref={this.combo1} />
                <Combobox data={["Any", "Red", "Green", "Blue"]} ref={this.combo2} />
            </div>
        );
    }
}
export default Sample;

如何定义ref动态创建的组合框？

我的组件的相关部分：

...
<p style={{ marginBottom: 0 }}>Filters:</p>                   
<button>Reset Filters</button>                            
{this.state.filters !== [] ? this.state.filters.map(filter => 
    <div>
        <p style={{ marginBottom: 0 }}>{filter.name}</p>
        <Combobox defaultValue="Any" data={filter.values} onChange={(e) => filterChanged(e, filter.property) } />
    </div>) : null}
...                        

我确信我犯了很多错误。我欢迎任何建设性的批评。

Answer 1

您真的需要裁判来实现您的目标吗？据我了解，您希望有一个按钮来重置某些组合框选定的值，我相信这最好通过使用valuereact-widgets'属性的状态管理来实现Combobox，而不是使用refs。

我创建了一个小沙箱，尝试重现您的需求并进行一些状态管理，以向您展示如何实现这一点。话虽这么说，它不使用基于类的组件，因为我更习惯基于函数的组件 + 钩子，但您应该能够通过基于类的组件中的this.setState()+而不是沙箱中的钩子来类似地实现它。this.stateuseState