Javascript 基于选中/取消选中Form.check-in-react引导显示/隐藏Form.control的步骤

我对反应和引导很陌生。我想知道-当选中或取消选中Form.check时，如何控制Form.control的可见性

我想在选中复选框时显示Form.Control，然后在复选框未选中时隐藏它。我试图通过设置状态来控制可见性，但到目前为止没有成功

这就是我所尝试的：

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

从“React”导入React；
从“react bootstrap”导入{Row，Form，Col，Button，Container}；
类MyCustomClass扩展了React.Component{
建造师（道具）{
超级（道具）；
this.initialState={
检查：错误，
显示URL:“”
}
this.handleChange=this.handleChange.bind（this）；
手变（活动）
{
const name=event.target.name；
const value=event.target.type==“复选框”？event.target.checked:event.target.value；
这是我的国家(
{
[名称]：值
})}
render（）
{    
让我们控制能见度；
if（this.state.Check）{
controlvisibility=“可见”；
}
否则{
controlvisibility=“hidden”//我不确定是否可以使用它。
}
返回(


)
} 

---

}

您已经在使用

此.state.Check

来控制复选框的值。因此，您可以像这样隐藏/显示

窗体.control

           <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.state.Check&&
}

---

当

This.state.Check的值为true时，这将创建
Form.Control
，当
This.state.Check
为false时将其删除。您已经在使用
This.state.Check
来控制复选框的值。这样您就可以像这样隐藏/显示
Form.Control

           <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.state.Check&&
}

当
This.state.Check的值为true时，这将创建
Form.Control
，当
This.state.Check
为false时将其删除。首先，您不应该在构造函数中定义渲染和处理程序！！！
您应该了解react中的状态：
试试这个：

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;

从“React”导入React；
从“react bootstrap”导入{Row，Form，Col，Button，Container}；
类MyCustomClass扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
检查：错误，
显示URL:“”
}
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
const name=event.target.name；
const value=event.target.type==“复选框”？event.target.checked:event.target.value；
这是我的国家({
[名称]：值
})
}
render（）{
返回(


{this.state.Check&}
)
}
}
导出默认MyCustomClass；
首先，您不应该在构造函数中定义渲染和处理程序！！！
您应该了解react中的状态：
试试这个：

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;

从“React”导入React；
从“react bootstrap”导入{Row，Form，Col，Button，Container}；
类MyCustomClass扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
检查：错误，
显示URL:“”
}
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
const name=event.target.name；
const value=event.target.type==“复选框”？event.target.checked:event.target.value；
这是我的国家({
[名称]：值
})
}
render（）{
返回(


{this.state.Check&}
)
}
}
导出默认MyCustomClass；
非常感谢您的回答！效果非常好：）此解决方案更好。非常感谢您的回答！效果非常好：）此解决方案更好。