javascript - To showhide a Form.control based on checkuncheck from Form.check in react bootstrap - Stack Overflow

admin管理员组

文章数量:1320597

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>
      )
    } 

}

• javascript
• reactjs
• react-bootstrap

Share Improve this question Follow asked Oct 11, 2019 at 10:16 DotNetSpartanDotNetSpartan 1,00155 gold badges2222 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You 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;

本文标签： javascriptTo showhide a Formcontrol based on checkuncheck from Formcheck in react bootstrapStack Overflow