最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin6浏览0评论

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 badges
Add a ment  | 

2 Answers 2

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;
发布评论

评论列表(0)

  1. 暂无评论