javascript - 两个 React 组件之间的输入焦点

Question

我正在尝试使用 React 实现以下目标。

• 当用户开始在下面的输入框中输入内容时，模式会出现 将出现，用户将继续在那里输入而不点击 Modal 的输入框

• 一旦用户单击退格键并清除模态框的输入框，它就会关闭该框，并且焦点将返回到主输入空框。

使用两种输入状态的原因:看到父输入框在对话框后面更新会看起来很奇怪。

代码:https://codesandbox.io/s/modal-reactstrap-forked-r2sns1?file=/src/modal.tsx:0-1658

父组件

 const App = () => {
  const [openDialog, setDialog] = useState({
    isModalOpen: false,
    value: ""
  });

  const toggle = () => {
    setDialog({ isModalOpen: false, value: "" });
  };

  return (
    <div className="App">
      <ModalExample
        openDialog={openDialog.isModalOpen}
        query={openDialog.value}
        toggle={() => toggle()}
      />
      <input
        type="text"
        value={openDialog.value}
        onChange={(e) =>
          setDialog({ isModalOpen: true, value: e.target.value })
        }
      ></input>
    </div>
  );
};

对话框组件

const Dialog = ({ openDialog, query, toggle }: any) => {
  const ref = useRef<HTMLInputElement | null>(null);
  const [searchResult, setSearchResult] = useState("");
  const [searchResult2, setSearchResult2] = useState(0);

  useEffect(() => {
    setSearchResult(query);
  }, [query]);

  useEffect(() => {
    if (ref.current) {
      ref.current?.focus();
    } else {
      setSearchResult2(searchResult2 + 1);
    }
  }, [searchResult2]);


  return (
    <>
      <Modal
        isOpen={openDialog}
        role="dialog"
        autoFocus={true}
        centered={true}
        size="lg"
        query={query}
        className="exampleModal"
        // @ts-ignore
        tabIndex="-1"
        toggle={toggle}
      >
        <div className="modal-content">
          <ModalHeader
            toggle={toggle}
            className="ett-bg-secondary text-blue m-0"
          >
            <span className="mx-4">Download</span>
          </ModalHeader>
          <div className="px-5 mt-2"></div>
          <Form
            onSubmit={(e) => {
              e.preventDefault();
              //validation.handleSubmit(e)
              return false;
            }}
          >
            <ModalBody className="">
              <div className="row">
                <div className="col-lg">
                  <div className="custom-shadow px-5">
                    <input
                      ref={ref}
                      type="text"
                      value={searchResult}
                      onChange={(e) => setSearchResult(e.target.value)}
                    />
                  </div>
                </div>
              </div>
            </ModalBody>
          </Form>
        </div>
      </Modal>
    </>
  );
};

我可以知道如何实现这个目标吗？？

Answer 1

你可以这样做:

 useEffect(() => {
    if (ref.current) {
      ref.current?.focus();
      if (searchResult?.length < 1) {
        setDialog({ value: "", isModalOpen: false });
      }
    }
  }, [searchResult]);

不要忘记在 Prop 中包含setDialog。这是一个工作sandbox .