React Bootstrap Modal 不适用于提交按钮

Question

我希望将值从 Form.Control 发送到按钮，这样我就可以做一些逻辑，但我似乎无法从输入中获取这个值。 我尝试使用 reft 但我不能在功能组件中使用 refs，所以我使用的是 textInput。 求助，卡了3天。 谢谢

import React from "react";
import { Modal, Form, Row, Col, Button } from "react-bootstrap";
import "./Login.css";

export const ForgotPassword = (props) => {
  let textInput = null;

  const handleClick = () => {
    console.log("i am here", textInput.focus());
  };

  return (
    <>
      <Modal
        {...props}
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Forgot Password
          </Modal.Title>
        </Modal.Header>
        <Modal.Body className="show-grid">
          <Form.Label>Please enter your Employee ID.</Form.Label>
          <Row>
            <Col className="lm-qus" md={5}>
              Employee ID:
            </Col>
            <Col md={7}>
              <Form.Control
                type="text"
                required
                name="answer"
                placeholder=""
                ref={(input) => {
                  textInput = input;
                }}
              />
            </Col>
          </Row>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={props.onHide}>Cancel</Button>
          <Button onClick={handleClick} type="submit">
            Continue
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

Answer 1

这不是模式特定的问题。 通过提供“值”属性使您的 Form.Control 成为受控输入。 定义 state 并在输入的更改事件上设置此 state。 然后，您可以在任何地方访问这个 state，包括按钮：

const [value, setValue] = React.useState("");
const handleChange = (event) => setValue(event.target.value);
const handleClick = () => alert(value);

https://codesandbox.io/s/objective-pond-rs8r9f