如何在 React 功能组件中获取表单/提交以使用 ReactStrap?

Posted

技术标签:

【中文标题】如何在 React 功能组件中获取表单/提交以使用 ReactStrap?【英文标题】:How Can I Get Form/Submit To Work with ReactStrap in a React functional component? 【发布时间】:2020-12-30 12:06:58 【问题描述】:

我喜欢 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>

【问题讨论】:

【参考方案1】:

将带有type=submitButton 组件添加到您的reactstrap 表单中,就像您使用带有type=submit&lt;input&gt; 一样,以便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>

【讨论】:

我确实尝试过,但从未调用过 handleSubmit。那是我的第一次尝试(抱歉没有添加问题)【参考方案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>
  );

【讨论】:

【参考方案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>

【讨论】:

真的希望 Reactstrap 不需要 innerRef【参考方案4】:

你可以通过参考输入的name键和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>

【讨论】:

以上是关于如何在 React 功能组件中获取表单/提交以使用 ReactStrap?的主要内容,如果未能解决你的问题,请参考以下文章

在React中提交表单后如何取消对输入的关注

react 之 fetch 登录请求formData提交参数

React Hook Form:提交带有嵌套组件的表单或提取嵌套组件的字段提交

在 React 中提交表单时如何获取要显示的名称和 uuid

关于antd如何在表单外点击触发表单验证的问题

React:我们可以将 2 个表单从 2 个不同的子组件传递给父组件,并使用父组件内的按钮提交它们吗?