我有一个模态组件，我在其中传递props. children的输入。当我在任一输入中键入字符时，输入在一个字符输入之后失去焦点。
我有几个console.logs，我注意到每次我按下一个键，console.log每次都会被记录。所以我假设输入失去了焦点，因为每次我输入一个键，状态都会刷新。
我四处寻找答案，我找到了一些，但他们似乎不太工作。唯一一个有效但效率不高的方法是使用onBlur而不是onChange。我不想使用onBlur的原因是因为你必须在输入外点击两次才能点击一个按钮或开始另一个输入。
我也试过在输入元素中添加一个键，但也不起作用。
我还在一个渲染函数中调用我的Modal输入，然后将其放入JSX中。我试着从函数中删除模式，并将其直接放入JSX，但这也不起作用。
所以我希望有人能在这里帮助我！
这就是模态函数

const createTerminalsModal = (e) => {
return (
  <Modal
    modalHeader={<h2>Create New Terminal</h2>}
    hideButtons={false}
    buttonContent={"Save"}
    closeModal={setShow}
  >
     <>
      <label htmlFor="displayName">Terminal Display Name</label>
      <Input
        style={{ marginTop: "10px", marginBottom: "25px" }}
  
        name="displayName"
        defaultValue={values.displayName}
        onChange={handleInput}
      />
      <label htmlFor="pairingCode">Pairing Code</label>
      <Input
        style={{ marginTop: "10px" }}
        defaultValue={values.pairingCode}
        type="text"
        name="pairingCode"
        onChange={handleInput}
      />
    </>
  </Modal>
);

};
我的输入状态和handleInput函数

const [values, setValues] = useState({ displayName: "", pairingCode: "" });

 const handleInput = () => {
const { name, value } = e.target;
setValues({
  ...values,
  [name]: value,
});

};
然后是JSX这里我调用模态函数

return !terminals?.findManyStripeTerminalLocation.length ? (
    <>
      <div style={centered}>
        <h3>{clinicName} does not have configured terminals</h3>
        <div style={{ textAlign: "center" }}>
          <button onClick={createTerminalLocation} style={button}>
            Configure Terminals
          </button>
        </div>
      </div>
    </>
  ) : (
    <div>
      {show && createTerminalsModal()} <<<<<<<<<< Modal here
      <h1>Terminals for {clinicName}</h1>
      <div
        style={{
          textAlign: "right",
          paddingTop: "10px",
          paddingBottom: "10px",
        }}
      >
        <button onClick={showModal} style={button}>
          New +
        </button>
      </div>
      <table style={tableStyle}>
        <thead>
          <tr>
            <th style={tableHeaderStyle}>Terminal Name</th>
            <th style={tableHeaderStyle}>Status</th>
          </tr>
        </thead>
        <tbody>
          {terminals?.findManyStripeTerminalLocation[0]?.terminals.map(
            (terminal) => {
              let healthCheck = terminal.healthchecks;
              let latestHealthCheck = healthCheck.slice(-1);
              return (
                <tr key={terminal.id}>
                  <td style={tableDataStyle}>{terminal.name}</td>
                  <td
                    style={
                      latestHealthCheck[0]?.status === "Online"
                        ? terminalOnline
                        : terminalOffline
                    }
                  >
                    {latestHealthCheck[0]?.status}
                  </td>
                </tr>
              );
            }
          )}
        </tbody>
      </table>
    </div>
  );
}

我的模态组件

export const NonGlobalModal = (props) => {

  return  (
    <Modal>
      <ModalContent size={props.size}>
        <ModalHeader>
          <Row>
            <C1>{props.modalHeader}</C1>
            <CA>
              <FaWindowClose
                size={32}
                style={{ margin: 8, cursor: "pointer" }}
                onClick={() => props.closeModal(false)}
              />
            </CA>
          </Row>
        </ModalHeader>
        <ModalInnerContent>{props.children}</ModalInnerContent>
        {!props.hideButtons ? (
          <ModalFooter>
            <Row>
              <C1 />
              <CA>
                <ModalButton style={{cursor: "pointer"}} onClick={props.click}>{props.buttonContent || "OK" }</ModalButton>
              </CA>
            </Row>
          </ModalFooter>
        ) : null}
      </ModalContent>
    </Modal>
  ) 
};