如何使用 reactstrap 库在 React 中设置发布表单？

Posted 2023-03-23

【中文标题】如何使用 reactstrap 库在 React 中设置发布表单？

【英文标题】：How to setup a posting form in React with the reactstrap library?

【发布时间】：2018-01-16 07:32:58

【问题描述】：

我是 React 和 reactstrap 的新手，我想知道如何设置一个表单，使用 Form-tag 在提交时发布到 post-route。我在文档中找不到执行此操作的示例。所以我正在寻找类似的东西：

<form action='/signup/insert' method = 'POST'>
    <div class="form-group">
        <input id ='signup' type='text' name='uid' placeholder='Username'><br>
        <input id ='signup' type='password' name='pwd' placeholder='Password'><br>
        <input id ='signup' type='text' name='email' placeholder='E-mail address'><br>
        <button id = 'switch' type='submit'>Sign Up</button>
     </div>
 </form>

我想要这样的东西：

<Form>
    <FormGroup>
        <Label for="exampleEmail">Email</Label>
        <Input
            type="email"
            name="email"
            id="exampleEmail"
            placeholder="[e-mail]"
        />
    </FormGroup>
    <FormGroup>
        <Label for="examplePassword">Password</Label>
        <Input
            type="password"
            name="password"
            id="examplePassword"
            placeholder="password"
        />
     </FormGroup>
     <Button>Sign Up</Button>
</Form>

我必须在按钮标签中添加这个吗？这个怎么做？顺便说一句，我的路线已经设置好了，所以我只需要从这里发布。

【参考方案1】：

与没有 Reactstrap 的示例完全相同。 Form 组件将您提供的任何属性传递给在您的页面上呈现的 <form> 标记，因此此代码 <Form action='/signup/insert' method='POST'> 将起作用（如果您的后端设置为处理请求。

【讨论】：

Jep，谢谢，我已经弄清楚了。为您提供免费奖金！