如何在 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=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>
【讨论】:
我确实尝试过,但从未调用过 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 之 fetch 登录请求formData提交参数
React Hook Form:提交带有嵌套组件的表单或提取嵌套组件的字段提交