如何在 React 功能組件中使用 ReactStrap 獲取表單/提交？

Question

我喜歡 Reactstrap 處理Modal所以我想繼續使用它，但我不知道如何從表單中獲取數據並在狀態中捕獲它。

const handleSubmit = (evt) => {
    evt.preventDefault();
    alert(`Submitting Name ${name}`);
};

使用 Reactstrap

<Form onSubmit={handleSubmit}>
   <FormGroup>
      <Label for="firstname">First Name</Label>{' '}
      <Input name="speakername"></Input>
    </FormGroup>
</Form>
    

當我使用標准表單和輸入元素時，我能夠在 handleSubmit 中捕獲我需要的內容，但是我不知道如何使用 Reactstrap 的 Form 和 Input 標簽來做同樣的事情

常規表單和輸入元素

<form onSubmit={handleSubmit}>
    <label>
        First Name:
        <input
            type="text"
            value={name}
            onChange={e => setName(e.target.value)}
        />
    </label>
    <input type="submit" value="Submit" />
</form>

Answer 1

將帶有type=submit的Button組件添加到您的reactstrap表單中，就像使用帶有type=submit的<input> ，這樣 React 就知道在單擊Button時觸發onSubmit處理程序。

import { Form, FormGroup, Input, Label, Button } from "reactstrap";

<Form onSubmit={handleSubmit}>
   <FormGroup>
      <Label for="firstname">First Name</Label>{' '}
      <Input name="speakername"></Input>
    </FormGroup>
    <Button type="submit">Submit</Button>
</Form>

Answer 2

我遇到了完全相同的問題。 似乎已將其修復如下...

（我相信您所缺少的只是 Input 組件的 value 和 onChange 道具，可能還有 setName()... 的 useState 掛鈎）

--- 設置狀態 ---

const currentDate = findDate();

function findDate() {
  let d = new Date(),
    month = "" + (d.getMonth() + 1),
    day = "" + d.getDate(),
    year = d.getFullYear();

  if (month.length < 2) month = "0" + month;
  if (day.length < 2) day = "0" + day;

  return [year, month, day].join("-");
}

console.log(typeof currentDate);

const UpdateCount = () => {
  const [date, setDate] = useState(currentDate);
  const [hactCount, setHactCount] = useState("");

--- 處理提交功能---

    const handleSubmit = (e) => {
      e.preventDefault();    
      alert(`${hactCount} hacts on ${date}`);
    };

--- 從功能組件返回 ---

return (
    <div>
      <Card>
        <CardTitle className="border-bottom p-3 mb-0">
          <i className="mdi mdi-priority-low mr-2"></i>Update your Hact Count
        </CardTitle>
        <CardBody>
          <CardSubtitle className="py-2">
            Insert your day's count and we'll do the magic
          </CardSubtitle>

          <Form onSubmit={handleSubmit}>
            <FormGroup>
              Date:
              <Input
                className="mt-2 mb-4"
                type="date"
                value={date}
                onChange={(e) => {
                  setDate(e.target.value);
                  console.log(typeof e.target.value);
                }}
              />
              Count:
              <Input
                className="my-2 mb-4"
                type="number"
                placeholder="0"
                value={hactCount}
                onChange={(e) => {
                  setHactCount(e.target.value);
                  console.log(e.target.value);
                }}
              />                 
              <br />
              <InputGroup className="text-center">
                <Button className="text-center" color="primary" type="submit">
                  Update
                </Button>
              </InputGroup>
            </FormGroup>
          </Form>
        </CardBody>
      </Card>

    </div>
  );

Answer 3

你應該可以使用innerRef

 onFormSubmit = (e) => {
    e.preventDefault()
    console.log(this.emailInputValue)
}

<Form onSubmit={this.onFormSubmit}>
                <FormGroup>
                    <Label >Email:</Label>
                    <Input innerRef={(node) => this.emailInputValue = node} type="email" name="email" " placeholder="Email" />
         
                <Button type="submit" color="primary"  >Submit</Button>
</Form>

Answer 4

您可以通過引用輸入的名稱鍵和 ID 來獲取值。

• 例子

 onFormSubmit = (e) => {
    e.preventDefault()
    console.log(e.target.company.value)
    console.log(e.target.name.value)
}
  <Modal isOpen={isModalVisible} toggle={handleModal}>
            <ModalHeader toggle={handleModal}>add modal</ModalHeader>
            <ModalBody>
                <Form onSubmit={onFinish}>
                    <FormGroup>
                        <Label for="company">company</Label>
                        <Input type={"text"} name={"company"} id={"company"} placeholder={"company"}  />
                    </FormGroup>
                    <FormGroup>
                        <Label for="name">name</Label>
                        <Input type={"text"} name={"name"} id={"name"} placeholder={"name"} />
                    </FormGroup>
                    <Button type="submit" color={"primary"}>
                        save
                    </Button>
                </Form>
            </ModalBody>
        </Modal>