如何解决反应从下拉菜单中添加字段
我现在还很陌生，因此我参与了这个正在进行的项目，并要求用户在选择多少个字段后向表单添加更多字段。表单基本上有几个字段，如果用户想添加更多人，他们可以选择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>
希望这对某人有帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。