使用reactstrap

Question

我已经开始使用reactstrap的表单，并且有一个我有多个复选框的场景。有了它，如果我选中了复选框，我想在它下方添加textarea。难以在单个组件中解决这个问题。

此外，我尝试使用reactstrap将工具提示附加到表单的其他区域，我得到了类似的混乱结果。使用此部分（与textarea复选框的情况类似），所有工具提示都应用于第一个anchor标记，如代码下方的图片所示。

我的代码：

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import {
  Container,
  Card,
  CardText,
  CardImg,
  CardBody,
  CardTitle,
    Button,
    Form,
    FormGroup,
    Label,
    Input,
    FormText,
    Tooltip,
    Col,
  Row } from 'reactstrap'
import Users from "./Users";
import './ConnCust.css';


class ConnCust extends Component {

constructor(props) {
            super(props);

            this.toggle = this.toggle.bind(this);
            this.state = {
                tooltipOpen: false
            };
        }

        toggle() {
            this.setState({
                tooltipOpen: !this.state.tooltipOpen
            });
        }

  render() {
    return (
      <div>
        <Container>
                    <Row>
                        <h2>Need help finding customers?</h2>
                    </Row>
          <Row>
                        <p>Please fill out the fields below to enable us to find the best matches for your requests.</p>
          </Row>
                    <Row>
                        <p>Note: Please be as specific and detailed as possible.</p>
          </Row>
          <Row>
                        <Form>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Work with customers for product/service feedback
                                </Label>
                            </FormGroup>
                            <FormGroup>
                                <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Get help with the research activity (build a survey, run experiments, analyze results, run usability or pilot studies, etc.)
                                </Label>
                            </FormGroup>
                            <FormGroup>
                                <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Validate new product/service ideas
                                </Label>
                            </FormGroup>
                            <FormGroup>
                                <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Need assistance in Scheduling Customer Feedback meetings
                                </Label>
                            </FormGroup>
                            <FormGroup>
                                <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Conduct Customer visit in person (Immerse)
                                </Label>
                            </FormGroup>
                            <FormGroup>
                                <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Conduct customer visit remotely (Immerse)
                                </Label>
                            </FormGroup>
                            <FormGroup>
                                <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                            </FormGroup>
                            <FormGroup>
                                <Label for="custNumber">Total Number of Customers Needed</Label>
                                <Input type="text" name="custNumber" id="custNumber" placeholder="any range from 1 to 99" />
                            </FormGroup>
                            <FormGroup>
                                <Label for="custType">What type of customers/job titles/roles are you looking for? (e.g. BI Analyst, CEO, Data Scientists, Network Administrators, DevOps etc.)?</Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    <a href="#" id="custType1">Administrators</a>
                                    <Tooltip placement="right" isOpen={this.state.tooltipOpen} target="custType1" toggle={this.toggle}>
                                        Computer support, computer systems, Database, IT, Network, Web
                                    </Tooltip>
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    <a href="#" id="custType2">Analysts</a>
                                    <Tooltip placement="left" isOpen={this.state.tooltipOpen} target="custType2" toggle={this.toggle}>
                                        Business, Infrastructure, Information Systems, Information Security, IT, PowerBI, Support, Software Quality Assurance, Systems, Web analytics
                                    </Tooltip>
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Architects
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Developers and Dev-Ops
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Engineers
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Managers
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Marketing and Sales
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Scientists
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Executives
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Other
                                </Label>
                            </FormGroup>
                            <FormGroup>
                                <Label for="exampleSelect">Is a Non-Disclosure Agreement (NDA) required for this Request?</Label>
                                <Input type="select" name="ndaOpt" id="ndaOpt">
                                    <option></option>
                                    <option>yes</option>
                                    <option>no</option>
                                    <option>not sure</option>
                                </Input>
                            </FormGroup>
                            <FormGroup>
                                <Label for="custType">Please list if you have any Customers/companies in mind for this Request?</Label>
                                <Input type="text" name="text" id="cust1text" placeholder="(e.g. DocuSign, GE, GEICO, Rackspace, Wal-Mart etc.)"/>
                            </FormGroup>
                            <FormGroup>
                                <Label for="custType">What technology would you like Customers from?</Label>
                                <Input type="text" name="text" id="cust1text" placeholder="(e.g. Azure, OMS, SQL Server, O365.)"/>
                            </FormGroup>
                            <FormGroup>
                                <Label for="custType">What industry or vertical you would like your customers from?</Label>
                                <Input type="text" name="text" id="cust1text" placeholder="(e.g. Banking, Health Care, Retail, Service Providers etc.)"/>
                            </FormGroup>
                            <FormGroup>
                                <Label for="custType">Are there any geographies (regions/countries) you would like customers from?</Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    APAC
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    UK
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Canada
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Central and Eastern Europe
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Germany
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    France
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Greater China
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    India
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Japan
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    LATAM
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    MEA
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    United States
                                </Label>
                            </FormGroup>
                            <FormGroup check>
                                <Label check>
                                    <Input type="checkbox" />{' '}
                                    Western Europe
                                </Label>
                            </FormGroup>
                            <Button><NavLink to="/Confirm">Submit</NavLink></Button>
                        </Form>

          </Row>
        </Container>
      </div>
    );
  }
}

export default ConnCust;

第二期的图片似乎与第一期有关：

Answer 1

这是利用创建自定义反应组件的能力的好地方。我会创建一个新组件，它是一个自定义复选框（基于reactstrap中的一个）与您描述的功能，然后您可以像任何其他组件一样导入到原始文档中！