Question

UI开发人员给了我一个用于选择下拉列表的jquery插件，该插件在div中创建了下拉列表并隐藏了select标签。因为样式不能应用于选择选项。

但我已经为Select标签编写了验证。我们之间存在冲突。

因此，请提供一些最佳实践，以便为React编写选择下拉选项和自定义css以及自定义验证

Answer 1

以下是用于形成用于显示选择下拉列表的div元素 / *自定义选择框* /

var x, i, j, selElmnt, a, b, c;
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
    selElmnt = x[i].getElementsByTagName("select")[0];
    a = document.createElement("DIV");
    a.setAttribute("class", "select-selected");
    a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
    x[i].appendChild(a);
    b = document.createElement("DIV");
    b.setAttribute("class", "select-items select-hide");
    for (j = 1; j < selElmnt.length; j++) {
        c = document.createElement("DIV");
        c.innerHTML = selElmnt.options[j].innerHTML;
        c.addEventListener("click", function(e) {
            var y, i, k, s, h;
            s = this.parentNode.parentNode.getElementsByTagName("select")[0];
            h = this.parentNode.previousSibling;
            for (i = 0; i < s.length; i++) {
                if (s.options[i].innerHTML == this.innerHTML) {
                    s.selectedIndex = i;
                    h.innerHTML = this.innerHTML;
                    h.setAttribute("class", "select-selected highlight-selected");
                    y = this.parentNode.getElementsByClassName("same-as-selected");
                    for (k = 0; k < y.length; k++) {
                        y[k].removeAttribute("class");
                    }
                    this.setAttribute("class", "same-as-selected");
                    break;
                }
            }
            h.click();
        });
        b.appendChild(c);
    }
    x[i].appendChild(b);
    a.addEventListener("click", function(e) {
        e.stopPropagation();
        closeAllSelect(this);
        this.nextSibling.classList.toggle("select-hide");
        this.classList.toggle("select-arrow-active");
    });
}

function closeAllSelect(elmnt) {
        var x, y, i, arrNo = [];
        x = document.getElementsByClassName("select-items");
        y = document.getElementsByClassName("select-selected");
        for (i = 0; i < y.length; i++) {
            if (elmnt == y[i]) {
                arrNo.push(i)
            } else {
                y[i].classList.remove("select-arrow-active");
            }
        }
        for (i = 0; i < x.length; i++) {
            if (arrNo.indexOf(i)) {
                x[i].classList.add("select-hide");
            }
        }
    }
document.addEventListener("click", closeAllSelect);

在React中，我将选择下拉列表显示为：

<select className="select-selected" id={val.QuestionId} name={val.Question} onChange={props.handlers}>
                                        <option value="">Select your option</option>     
                                        {val.Options.map((options, k) => {
                                            return (
                                                <SelectInput key={k} id={options.DisplayText} options={options.DisplayText}/>
                                            )
                                        })}
                                    </select>

问题是：我使用处理程序函数进行选择，但UI正在构建div内容而不是select。使用div元素而不是select的原因是样式不能应用于html中的选项标签。在这里，我如何使用React中的div内容来处理答案。如果任何使div下拉的示例做出反应并处理验证/答案。请分享。我真的很担心

请提供一些建议，其中包含Reactjs Select下拉列表中应遵循的最佳实践代码

1 个答案: