如何从外部覆盖内部组件状态答案

【问题标题】：How to overwrite internal component state from the outside如何从外部覆盖内部组件状态
【发布时间】：2022-01-18 01:41:23
【问题描述】：

我有一个相当简单的NumberInput 组件/控件，它使用useState 处理其内部状态（其当前值）。 “外部世界”对此状态不感兴趣，只通过回调函数onSubmit 接收更新，该回调函数在 enter & blur 时调用。

我还有一个名为MinMaxNumberInputs 的组件，它由2 个NumberInputs 构建。这 2 个 NumberInputs 彼此不知道任何事情，而父 MinMaxNumberInputs 必须通过例如处理一些“值同步”。确保 min

最后一部分是我有点卡住的地方，因为我不知道如何“强制设置”或在需要时从 MinMaxNumberInputs 覆盖 NumberInputs 的内部状态。

最好通过代码来解释：

NumberInput.tsx

// ...

type NumberInputProps = {
  value: number;
  onSubmit: (value: number) => void;
};

export default function NumberInput(props: NumberInputProps) {
  // [1] props.value is obviously only applied on creation.
  //     Future changes have no effect.
  const [value, setValue] = useState(props.value);

  // Called on enter & blur
  const submitValue = () => props.onSubmit(value);

  // ...

  return <input value={value} {/* ... */} />;
}

MinMaxNumberInputs.tsx

// ...

export const MinMaxValueInput = () => {
  // Only for simpler showcasing, using global redux state in real world...
  const [minValue, setMinValue] = useState(0);
  const [maxValue, setMaxValue] = useState(0);

  const onMinValueChanged = (newMinValue: number) => {
    // [2] Ensure that entered value (min here) stays the same but adjust max if required
    //     ??? How to set adjusted value in max NumberInput ???
    const newMaxValue = Math.max(newMinValue, maxValue);
    setMinValue(newMinValue);
    setMaxValue(newMaxValue);
  };

  const onMaxValueChanged = (newMaxValue: number) => {
    // [3] Ensure that entered value (max here) stays the same but adjust min if required
    //     ??? How to set adjusted value in min NumberInput ???
    const newMinValue = Math.min(minValue, newMaxValue);
    setMinValue(newMinValue);
    setMaxValue(newMaxValue);
  };

  // ...

  return (
    <>
      <NumberInput value={minValue} onSubmit={onMinValueChanged} />
      <NumberInput value={maxValue} onSubmit={onMaxValueChanged} />
    </>
  );
};

事情是这样的：

当在 [2] 中调整 newMaxValue（或在 [3] 中调整 newMinValue）时，MinMaxNumberInputs 在其状态中保持正确的调整值，但这些值不会传播到相应的 NumberInput 和因此显示的值不会更新/更正。

我完全理解为什么这不起作用。 value 属性仅应用于 [1] 处的 NumberInputs 内部状态一次，但之后不再应用。但是，我不知道如何在不“打破NumberInput 的界限”的情况下克服这个问题（例如，在那里也使用一些全局状态，...）。

非常感谢您对此的指导！

谢谢

【问题讨论】：

标签： reactjs use-state react-state react-tsx

【解决方案1】：

您的NumberInput 是UNCONTROLLED 组件，您的界面具有误导性，应将其命名为initialValue 而不是value。

因此，您想要的是所谓的“混合组件”，在这种情况下，当您传递 value 属性时，它会变为 CONTROLLED：

export default function NumberInput(props: NumberInputProps) {
  const [value, setValue] = useState(props.initialValue);
  
  useEffect(() => {
    setValue(props.value)
  }, [props.value])

  return <input value={value}  />;
}

【讨论】：