I am pretty new to react and bootstrap. I want to know - How can i control the visibility of a Form.control when Form.check is checked or unchecked.
I want to display the Form.Control when a checkbox is checked and then hide it when the checkbox is unchecked. I tried to control the visibility by setting the state but so far I have been unsuccessful.
This is what i tried:
import React from 'react';
import { Row, Form, Col, Button, Container } from 'react-bootstrap';
class MyCustomClass extends React.Component {
constructor(props) {
super(props);
this.initialState = {
Check: false,
DisplayUrl: ''
}
this.handleChange = this.handleChange.bind(this);
handleChange(event)
{
const name = event.target.name;
const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;
this.setState(
{
[name]: value
})}
render()
{
let controlvisibility;
if (this.state.Check) {
controlvisibility = "visible";
}
else {
controlvisibility = "hidden"; //I am not sure, if this can be used.
}
return (
<div>
<br />
<Form>
<Form.Group as={Row}>
<Container>
<Row>
<Form.Check inline
type="Checkbox"
label="See the Url"
name="Check"
id="cbDisplayUrl"
checked={this.state.Check}
onChange={this.handleChange}
/>
<Form.Control inline
type="text"
name="DisplayUrl"
onChange={this.handleChange}
value={this.state.DisplayUrl}
placeholder="The Navigation Url" />
</Row>
</Container>
</Form.Group>
</Form>
</div>
)
}
}
I am pretty new to react and bootstrap. I want to know - How can i control the visibility of a Form.control when Form.check is checked or unchecked.
I want to display the Form.Control when a checkbox is checked and then hide it when the checkbox is unchecked. I tried to control the visibility by setting the state but so far I have been unsuccessful.
This is what i tried:
import React from 'react';
import { Row, Form, Col, Button, Container } from 'react-bootstrap';
class MyCustomClass extends React.Component {
constructor(props) {
super(props);
this.initialState = {
Check: false,
DisplayUrl: ''
}
this.handleChange = this.handleChange.bind(this);
handleChange(event)
{
const name = event.target.name;
const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;
this.setState(
{
[name]: value
})}
render()
{
let controlvisibility;
if (this.state.Check) {
controlvisibility = "visible";
}
else {
controlvisibility = "hidden"; //I am not sure, if this can be used.
}
return (
<div>
<br />
<Form>
<Form.Group as={Row}>
<Container>
<Row>
<Form.Check inline
type="Checkbox"
label="See the Url"
name="Check"
id="cbDisplayUrl"
checked={this.state.Check}
onChange={this.handleChange}
/>
<Form.Control inline
type="text"
name="DisplayUrl"
onChange={this.handleChange}
value={this.state.DisplayUrl}
placeholder="The Navigation Url" />
</Row>
</Container>
</Form.Group>
</Form>
</div>
)
}
}
Share Improve this question asked Oct 11, 2019 at 10:16 DotNetSpartanDotNetSpartan 1,0015 gold badges22 silver badges48 bronze badges2 Answers
Reset to default 4You are already using this.state.Check
to control the value of the checkbox. So you can hide/show to Form.Control
like this
<Row>
<Form.Check inline
type="Checkbox"
label="See the Url"
name="Check"
id="cbDisplayUrl"
checked={this.state.Check}
onChange={this.handleChange}
/>
{this.state.Check &&
<Form.Control inline
type="text"
name="DisplayUrl"
onChange={this.handleChange}
value={this.state.DisplayUrl}
placeholder="The Navigation Url" />
}
</Row>
This will create Form.Control
when the value of this.state.Check
is true, and remove it when this.state.Check
is fale
first of all you shouldn't define render and handlers in constructor!!! and you should learn about state in react: try this:
import React from 'react';
import { Row, Form, Col, Button, Container } from 'react-bootstrap';
class MyCustomClass extends React.Component {
constructor(props) {
super(props);
this.state = {
Check: false,
DisplayUrl: ''
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
const name = event.target.name;
const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;
this.setState({
[name]: value
})
}
render() {
return (
<div>
<br />
<Form>
<Form.Group as={Row}>
<Container>
<Row>
<Form.Check inline
type="Checkbox"
label="See the Url"
name="Check"
id="cbDisplayUrl"
checked={this.state.Check}
onChange={this.handleChange}
/>
{this.state.Check && <Form.Control inline
type="text"
name="DisplayUrl"
onChange={this.handleChange}
value={this.state.DisplayUrl}
placeholder="The Navigation Url" />}
</Row>
</Container>
</Form.Group>
</Form>
</div>
)
}
}
export default MyCustomClass;