[英]How Can I Get Form/Submit To Work with ReactStrap in a React functional component?
I like how Reactstrap handles Modal
so I want to keep using it, but I can't figure out how to get the data out of a form and capture it in state.我喜欢 Reactstrap 处理Modal
所以我想继续使用它,但我不知道如何从表单中获取数据并在状态中捕获它。
const handleSubmit = (evt) => {
evt.preventDefault();
alert(`Submitting Name ${name}`);
};
With Reactstrap使用 Reactstrap
<Form onSubmit={handleSubmit}>
<FormGroup>
<Label for="firstname">First Name</Label>{' '}
<Input name="speakername"></Input>
</FormGroup>
</Form>
When I use standard form and input elements, I'm able to capture what I need in handleSubmit, but I can't figure out how to do the same thing with the Form and Input tags of Reactstrap当我使用标准表单和输入元素时,我能够在 handleSubmit 中捕获我需要的内容,但是我不知道如何使用 Reactstrap 的 Form 和 Input 标签来做同样的事情
Regular form and input elements常规表单和输入元素
<form onSubmit={handleSubmit}>
<label>
First Name:
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
/>
</label>
<input type="submit" value="Submit" />
</form>
Add a Button
component with type=submit
to your reactstrap
form the same way you had an <input>
with type=submit
so that React know's to fire the onSubmit
handler when the Button
is clicked.将带有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>
I was having exactly the same problem.我遇到了完全相同的问题。 Seemed to have fixed it as follows...似乎已将其修复如下...
(I believe all you're missing are the value & onChange props for the Input component, and possibly the useState hooks for setName()... ) (我相信您所缺少的只是 Input 组件的 value 和 onChange 道具,可能还有 setName()... 的 useState 挂钩)
--- Set state --- --- 设置状态 ---
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("");
--- Handle Submit function --- --- 处理提交功能---
const handleSubmit = (e) => {
e.preventDefault();
alert(`${hactCount} hacts on ${date}`);
};
--- Return from functional component --- --- 从功能组件返回 ---
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>
);
you should be able using innerRef你应该可以使用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>
You can get the value by referring to the name key and ID of the input.您可以通过引用输入的名称键和 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.