React Bootstrap 模式在提交按钮上不起作用

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 成为受控输入。定义状态并在输入的更改事件上设置此状态。然后你可以在任何地方访问这个状态，包括按钮：

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

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

React Bootstrap 模式在提交按钮上不起作用

React Bootstrap Modal not working on submit Button

javascript

reactjs

react-bootstrap