仅更改1时如何更改所有下拉选择框的值？答案

【问题标题】：How to change the values of all drop down select boxes when changing only 1?仅更改1时如何更改所有下拉选择框的值？
【发布时间】：2021-09-03 12:27:19
【问题描述】：

使用 react 和 typescript：

假设我有一个包含几个字段的表单 - 长度、宽度、高度等。现在我们可以将这些字段输入为英尺或米。对我来说，如果我要更改一个字段的单位类型，那么它也应该更改其他字段是有道理的。例如：

如果我要将左侧组件的选择下拉菜单更改为“ft”，我希望右侧的组件也能自动更改。到目前为止的代码如下所示：

    <Select
      options={unitOptions}
      defaultValue={unitOptions.find(
        ({ value }) => value === displayValueType
      )}
      isDisabled={disabled}
      styles={{
        control: {
          border: "none",
          backgroundColor: "transparent",
          boxShadow: "none"
        },
        valueContainer: {
          width: "35px",
          border: "none"
        },
        singleValue: {
          fontWeight: 200,
          fontSize: "14px"
        },
        option: {
          fontSize: "14px",
          fontWeight: 200
        }
      }}
      onChange={({ value }) => setDisplayValueType(value)}
      menuPosition="fixed"
    />

这在其他组件/包装器中嵌套了几层，但我不知道这是必要的。我在寻找什么以便我可以将一个下拉事件与另一个下拉事件联系起来？

谢谢！

【问题讨论】：

正如@user3927415 所说，在他的 1° 情况下，表单输入的父级必须维护“currentUnit”，并且他将其提供给所有表单组件（因此您可以将其绑定到您选择的默认值值），你的“onChange”必须向父母提出一个事件来改变它。

标签： html css reactjs typescript

【解决方案1】：

我不完全了解您的组件层次结构，但您可以：

将unitOptions作为参数传递给所有相关子节点，并且只使用一个数组
使用状态管理库（如 Redux、React Context 等）并将unitOptions 保存在其中，并在应用程序中全局使用

【讨论】：