与受控组件的外部交互

与受控组件的外部交互是指通过外部操作来修改受控组件的值。以下是一种解决方法，其中包含代码示例：

import React, { useState } from "react";

const ControlledComponent = () => {
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
  );
};

const ExternalInteractionExample = () => {
  const [externalValue, setExternalValue] = useState("");

  const handleExternalChange = (event) => {
    setExternalValue(event.target.value);
  };

  return (
    <div>
      <ControlledComponent />

      <input
        type="text"
        value={externalValue}
        onChange={handleExternalChange}
      />
      <button onClick={() => setExternalValue("Hello")}>
        Set External Value
      </button>
    </div>
  );
};

export default ExternalInteractionExample;

在上面的示例中，ControlledComponent 是一个受控组件，它通过 useState 钩子来保存其值，并通过 handleChange 函数来更新该值。ExternalInteractionExample 组件包含了 ControlledComponent 组件以及一个外部的输入框和按钮。通过设置 externalValue 和 handleExternalChange 函数，我们可以通过外部操作来修改 ControlledComponent 组件的值。

当我们在外部的输入框中输入内容时，handleExternalChange 函数会被触发，将输入框的值保存到 externalValue 中。然后，这个值可以通过 props 或其他方式传递给 ControlledComponent 组件。

当我们点击“Set External Value”按钮时，setExternalValue 函数会被调用，将 externalValue 设置为 "Hello"。由于 ControlledComponent 组件的值是受控的，它会根据 externalValue 的变化自动更新自己的值，并重新渲染。

这样，我们就实现了与受控组件的外部交互。