Hướng dẫn form control react-bootstrap - kiểm soát biểu mẫu phản ứng-bootstrap

Tôi khá mới để phản ứng và bootstrap.Tôi muốn biết - làm thế nào tôi có thể kiểm soát khả năng hiển thị của một biểu mẫu.

Tôi muốn hiển thị Form.Control Khi hộp kiểm được kiểm tra và sau đó ẩn nó khi không được kiểm tra.Tôi đã cố gắng kiểm soát khả năng hiển thị bằng cách đặt trạng thái nhưng cho đến nay tôi đã không thành công.

Đây là những gì tôi đã thử:

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 (
        

) }

}

Hỏi ngày 11 tháng 10 năm 2019 lúc 10:16Oct 11, 2019 at 10:16Oct 11, 2019 at 10:16

Hướng dẫn form control react-bootstrap - kiểm soát biểu mẫu phản ứng-bootstrap

DotnetspartandotnetspartanDotNetSpartanDotNetSpartan

7292 Huy hiệu vàng18 Huy hiệu bạc36 Huy hiệu đồng2 gold badges18 silver badges36 bronze badges2 gold badges18 silver badges36 bronze badges

Bạn đã sử dụng this.state.Check để kiểm soát giá trị của hộp kiểm.Vì vậy, bạn có thể ẩn/hiển thị với Form.Control như thế này

           
              
              {this.state.Check &&
                 
                  }

             

Điều này sẽ tạo Form.Control khi giá trị của this.state.Check là đúng và xóa nó khi this.state.Check là Fale

Đã trả lời ngày 11 tháng 10 năm 2019 lúc 10:30Oct 11, 2019 at 10:30Oct 11, 2019 at 10:30

0

Trước hết, bạn không nên định nghĩa trình kết xuất và xử lý trong Trình xây dựng !!!Và bạn nên tìm hiểu về trạng thái trong React: Hãy thử điều này:

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 (
            

{this.state.Check && }
) } } export default MyCustomClass;

Đã trả lời ngày 11 tháng 10 năm 2019 lúc 10:45Oct 11, 2019 at 10:45Oct 11, 2019 at 10:45

2