反应从下拉菜单中添加字段

问题描述

我现在还很陌生，因此我参与了这个正在进行的项目，并要求用户在选择多少个字段后向表单添加更多字段。表单基本上有几个字段，如果用户想添加更多人，他们可以选择1、2、3或4，我需要他们从下拉菜单中进行选择，但是我不确定如何去做吧。我是否可以基于下拉菜单中的点击进行div隐藏？这是我正在使用的代码。

也可以是一个按钮，单击一个或另一个按钮可以添加多个字段

我见过很多人使用redux来做，但是我对redux的了解还不够多，无法弄清他们在做什么。

import React,{ PureComponent } from 'react';
import { connect } from 'react-redux';
import {
  Card,CardBody,Col,Button,Form,FormGroup,Label,Input,UncontrolledDropdown,DropdownToggle,DropdownMenu,DropdownItem,} from 'reactstrap';
import ChevronDownIcon from 'mdi-react/ChevronDownIcon';
import PropTypes from 'prop-types';
import StaticBar from './StaticBar';
import { getBasicQuote } from '../../../redux/actions/quoteActions';
import QuotePanel from './QuotePanel';


class VerticalForm extends PureComponent {
  static propTypes = {
    history: PropTypes.shape({}).isrequired,getBasicQuotethis: PropTypes.func.isrequired,};

  constructor() {
    super();
    this.state = {
    };
  }

  handleSubmit = async (event) => {
    const { getBasicQuotethis } = this.props;
    const gender = event.target.elements.gender.value;
    const age = event.target.elements.age.value;
    event.preventDefault();
    getBasicQuotethis(age,gender);
  }

  render() {
    return (
      <>
        <Col md={12} lg={12}>
          <Card>
            <CardBody>
              <div className="card__title">
                <h5 className="bold-text">Quote Tool</h5>
                <h5 className="subhead">Labels are above fields</h5>
              </div>
              <Form className="form" onSubmit={this.handleSubmit}>
                <FormGroup className="form__form-group">
                  <Label className="form__form-group-label" for="registerEmail">Gender</Label>
                  <Input
                    // className="form__form-group-field"
                    type="text"
                    name="gender"
                    id="registerEmail"
                    placeholder="Gender"
                  />
                </FormGroup>
                <FormGroup className="form__form-group">
                  <Label className="form__form-group-label" for="registerPassword">Age</Label>
                  <Input
                    // className="form__form-group-field"
                    type="text"
                    name="age"
                    id="registerEmail"
                    placeholder="Age"
                  />
                </FormGroup>
                <Button size="sm" className="btn btn-primary" type="Submit">
                  Submit
                </Button>
                <UncontrolledDropdown>
                  <DropdownToggle className="icon icon--right" outline color="primary">
                    <p>Add Dependent <ChevronDownIcon /></p>
                  </DropdownToggle>
                  <DropdownMenu className="dropdown__menu">
                    <DropdownItem>1</DropdownItem>
                    <DropdownItem>2</DropdownItem>
                    <DropdownItem>3</DropdownItem>
                    <DropdownItem divider />
                    <DropdownItem>4 +</DropdownItem>
                  </DropdownMenu>
                </UncontrolledDropdown>
              </Form>
            </CardBody>
          </Card>
        </Col>
        <StaticBar />
        <QuotePanel />
      </>
    );
  }
}

export default connect(null,{ getBasicQuotethis: getBasicQuote })(VerticalForm);

感谢您的帮助

解决方法

好的，所以我弄清楚怎么做。

class VerticalForm extends PureComponent {
  static propTypes = {
    history: PropTypes.shape({}).isRequired,getBasicQuotethis: PropTypes.func.isRequired,};

  constructor() {
    super();
    this.state = {
      showHideDependentSpouse: false,showHideDependent2: false,showHideDependent3: false,showHideDependent4: false,};
    this.hideComponent = this.hideComponent.bind(this);
  }

  handleSubmit = async (event) => {
    const { getBasicQuotethis } = this.props;
    const gender = event.target.elements.gender.value;
    const age = event.target.elements.age.value;
    event.preventDefault();
    getBasicQuotethis(age,gender);
  }


  hideComponent(name) {
    switch (name) {
      case 'showHideDependentSpouse':
        this.setState(prevState => ({ showHideDependentSpouse: !prevState.showHideDependentSpouse }));
        break;
      case 'showHideDependent2':
        this.setState(prevState => ({ showHideDependent2: !prevState.showHideDependent2 }));
        break;
      case 'showHideDependent3':
        this.setState(prevState => ({ showHideDependent3: !prevState.showHideDependent3 }));
        break;
      case 'showHideDependent4':
        this.setState(prevState => ({ showHideDependent4: !prevState.showHideDependent4 }));
        break;
      default:
    }
  }

  render() {
    const {
      showHideDependentSpouse,showHideDependent2,showHideDependent3,showHideDependent4,} = this.state;
    return (
      <>
        <Col md={12} lg={12}>
          <Card>
            <CardBody>
              <div className="card__title">
                <h5 className="bold-text">Quote Tool</h5>
                <h5 className="subhead">Labels are above fields</h5>
              </div>
              <Form className="form" onSubmit={this.handleSubmit}>
                <FormGroup className="form__form-group">
                  <Label className="form__form-group-label" for="registerEmail">Gender</Label>
                  <Input
                    // className="form__form-group-field"
                    type="text"
                    name="gender"
                    id="registerEmail"
                    placeholder="Gender"
                  />
                </FormGroup>
                <FormGroup className="form__form-group">
                  <Label className="form__form-group-label" for="registerPassword">Age</Label>
                  <Input
                    // className="form__form-group-field"
                    type="text"
                    name="age"
                    id="registerEmail"
                    placeholder="Age"
                  />
                  <div>
                    {showHideDependentSpouse && <DependentSpouse />}
                    {showHideDependent2 && <Dependent1 />}
                    {showHideDependent3 && <Dependent1 />}
                    {showHideDependent4 && <Dependent4 />}
                  </div>
                </FormGroup>
                <Button size="sm" className="btn btn-primary" type="Submit">
                  Submit
                </Button>
                <Row>
                  <Col lg={8}>
                    <p>Check each box to add the respective number of dependents</p>
                  </Col>
                  <Col>
                    <Label check>
                      <Input type="checkbox" onClick={() => this.hideComponent('showHideDependentSpouse')} />
                    </Label>
                  </Col>
                  <Col>
                    <Label check>
                      <Input type="checkbox" onClick={() => this.hideComponent('showHideDependent2')} />
                    </Label>
                  </Col>
                  <Col>
                    <Label check>
                      <Input type="checkbox" onClick={() => this.hideComponent('showHideDependent3')} />
                    </Label>
                  </Col>
                  <Col>
                    <Label check>
                      <Input type="checkbox" onClick={() => this.hideComponent('showHideDependent4')} />
                    </Label>
                  </Col>
                </Row>
              </Form>
            </CardBody>
          </Card>
        </Col>
        <StaticBar />
        <QuotePanel />
      </>
    );
  }
}

export default connect(null,{ getBasicQuotethis: getBasicQuote })(VerticalForm);

基本上为我要渲染的每个组件设置状态，将单个组件放在一边，然后使逻辑将状态更改为false或true，然后在每个组件上创建一个条件以检查状态是否为true。 / p>

希望这对某人有帮助。