在多模式下以编程方式清除/重置 React-Select label？

Question

我是新来的反应并试图维护/更新应用程序中的一些现有代码

在一个表单中，我们有一个 react-select 自定义/扩展组件，其值是使用 react-select 的“onChange”设置的。 在这种情况下，即使 state 被重置（在组件重新渲染期间，而不是初始渲染期间），我们也会在重置选定的 label 时遇到问题

我已经为非多 select 组件尝试了以下代码，它确实有效，即当 state 值重置时，强制选定的标签在 UI 中重新呈现

key={`my_unique_select_key__${selected}`}

但是，当我有一个“多”select 组件时，上面的代码不适合，因为可以有超过 1 个“选定”值。 尝试了 'key' 属性的各种选项，即使用 map function 在选定值列表上生成的密钥列表，但对我不起作用

此外，我无法将 null 传递给“value”属性，因为我们正在使用“onChange”来设置值。 即尝试设置 value 属性将与用于设置 value(s) 的现有 onChange 功能冲突。

不确定如何解决此问题，因为我仍在探索可用/其他选项。

注意：上面提到的代码是之前文章的一部分如何以编程方式清除/重置 React-Select？

Answer 1

您也可以尝试将值设置为空字符串。 例如：

    document.getElementById('TagOfTheLabel').value = "";

如果它导致错误，请尝试：

    document.getElementById('TagOfTheLabel').innerHTML = "";

注意：如果它想要至少一个字符或字符串，请替换""; 用" "; . 换句话说，只需添加一个空格。