I am trying to create a form using react-bootstrap, and cannot figure out how to use the horizontal Form layout. Below is my code for signin.js.
import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
import {Form, FormGroup, FormControl, ControlLabel, Col, Button} from 'react-bootstrap';
class Signin extends Component{
handleFormSubmit({username,password}){
console.log(username,password);
}
render(){
const {handleSubmit, fields: {username,password}}=this.props;
return(
<Form horizontal className="col-sm-6 offset-sm-3" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<FormGroup>
<Col componentClass={ControlLabel} sm={2}>
Username:
</Col>
<Col sm={10}>
<FormControl {...username} type="text" />
</Col>
</FormGroup>
<FormGroup>
<Col componentClass={ControlLabel} sm={2}>
Password:
</Col>
<Col sm={10}>
<FormControl {...password} type="password" />
</Col>
</FormGroup>
<FormGroup>
<Col>
<Button type="submit">Submit</Button>
</Col>
</FormGroup>
</Form>
);
}
}
export default reduxForm({
form: 'signin',
fields: ['username','password']
})(Signin);
The reason why your implementation doesn't work is because Bootstrap uses Flex. You have to wrap your form elements in a row.
<Form horizontal className="col-sm-6 offset-sm-3" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<FormGroup>
<Form.Row>
<Col componentClass={ControlLabel} sm={2}>
Username:
</Col>
<Col sm={10}>
<FormControl {...username} type="text" />
</Col>
</Form.Row
</FormGroup>
<FormGroup>
<Form.Row>
<Col componentClass={ControlLabel} sm={2}>
Password:
</Col>
<Col sm={10}>
<FormControl {...password} type="password" />
</Col>
</Form.Row>
</FormGroup>
<FormGroup>
<Col>
<Button type="submit">Submit</Button>
</Col>
</FormGroup>
</Form>
I am using " inline<\/strong><\/em> " instead of horizontal and its working.
<Form inline onSubmit={handleSubmit}>
<Form.Group>
<Form.Label>Email</Form.Label>
<Form.Control type="email" name="email" isInvalid={!isEmpty(errors.email)} value={values.email} onChange={handleChange}></Form.Control>
<Form.Control.Feedback className="font-weight-bold" type="invalid" role="alert"> {errors.email}</Form.Control.Feedback>
</Form.Group>
<Form.Group>
<Form.Label>Password</Form.Label>
<Form.Control type="password" name="password" value={values.password} isInvalid={!isEmpty(errors.password)} onChange={handleChange}></Form.Control>
<Form.Control.Feedback className="font-weight-bold" type="invalid" role="alert"> {errors.password}</Form.Control.Feedback>
</Form.Group>
<Form.Group className="text-center">
<Button type="button" variant="primary" className="mt-3" onClick={submitForm}>Login</Button>
</Form.Group>
</Form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.