I am trying to create a bootstrap controlled form. I am using React-bootstrap's <Form> component. I just copied and pasted the code from the react bootstrap website into my code editor. I got an unexpected result.
React Bootstrap Forms
import React from 'react';
// bootstrap components
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
class Test extends React.Component{
render(){
return (
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
)
}
}
export default Test;
RESULT:
You can see how button has been rendered on the left side. Checkbox and muted text has also rendered on the left side. There is a border-radius has applied, which is not expected.
NOTE: I am not using any external style. I am rendering this single component.
Do you have all the dependencies installed? Looks like CSS isn't added.
npm install bootstrap react-bootstrap
You'll also need to have the CSS imported in your src/index.js or src/app.js.
import 'bootstrap/dist/css/bootstrap.min.css'
Related
How I can upload a photo and immediately display it using React. And Is it possible to make it so that it is saved only if you click on the button or save the file, but if the action was canceled delete it
For example i have this form
import Form from 'react-bootstrap/Form';
<Form.Group controlId="formFile" className="mb-3">
<Form.Label>Default file input example</Form.Label>
<Form.Control type="file" />
</Form.Group>
Please give examples of how this can be done.
i have this form using react bootstrap form but i dont seem to be able to change the color of the placeholder
{/*Lastname*/}
<Form.Group>
<Form.Label style={styles.labels}>
<h3>Lastname</h3>
</Form.Label>
<Form.Control
style={styles.inputName}
type="text"
id="creatorLastName"
name="creatorLastName"
placeholder="Lastname"
onChange={handleChange}
/>
I want to make file choose, just text like choose file and open file choose area open, I use react boostrap how can I do that below is my code now is choose file button and I don't want this and I searching google and I don't found solution
<Form.Group>
<Form.File onChange={onChangeFile} id="choseFile" isInvalid={true} />
</Form.Group>
Try this code maybe this is what you want
<Form.Group>
<Form.File onChange={onChangeFile} id="choseFile" isInvalid={true} label="chose a file" custom/>
</Form.Group>
I built a simple contact page using formik and material UI. Everything works except for when I use the Material UI components instead of regular input tags. It seems like the program can't read the value inside the Material UI TextField component.
This works:
<Field
name="name"
id="outlined-textarea"
label="First Name"
variant="outlined"
margin="dense"
component='input'
/>
<ErrorMessage name="name" className="errorMsg" component="p" />
This doesn't work:
<Field
name="lastName"
id="outlined-textarea"
label="Last Name"
component={TextField}
variant="outlined"
margin="dense"
/>
<ErrorMessage name="lastName" className="errorMsg" component="p" />
I created a sandbox of the code here.
To hook formik properly with material ui, use render prop (instead of component) and grab the formik field which you get and pass it down to material ui Textfield
Like this
<Field
name="lastName"
id="outlined-textarea"
label="Last Name"
render={({ field }) => <TextField {...field} />}
variant="outlined"
margin="dense"
/>
I have simple from which i used semantic-ui-react to create it :
<Form onSubmit={this.handleSubmit.bind(this)}>
<Form.Field>
<Input placeholder="From ..." type="text" ref="from" />
<Label pointing>please enter valid email adress</Label>
</Form.Field>
<Divider />
now i cant access to value's of the input. here is my code:
from: this.refs.from.value
it's all undefined.how can fix this ?
I recommend to use Form and related components in the controlled way, because most of SUIR components are functional, so they don't support refs. I've a codepen to show it in action. There is also example in docs.