如何解决反应选择多 onChange 事件处理程序错误
我正在研究 React Step 表单向导。在一个步骤中,我有一个多选下拉菜单要处理。我在这个下拉菜单中使用了 react-select 包。但是,我正在努力解决如何使用选定选项设置状态。所以我有两个单独的文件:一个父文件和一个子文件。
父文件
import React,{ Component } from 'react';
import UploadFiles from './Components/UploadFiles';
import UserOptions from './Components/UserOptions';
import Confirmation from './Components/Confirmation';
import Success from './Components/Success';
import './wizard.css'
export class CreateNewOrder extends Component {
state = {
step: 1,documentType: '',sourceLanguage: [],targetLanguage: []
};
// Proceed to next step
nextStep = () => {
const { step } = this.state;
this.setState({
step: step + 1
});
};
// Go back to prev step
prevStep = () => {
const { step } = this.state;
this.setState({
step: step - 1
});
};
// Handle fields change
handleChange = input => e => {
this.setState({ [input]: e.target.value });
};
// Handle fields selection
handleSelection = value => e => {
this.setState({value: e.target.value});
}
render() {
const { step } = this.state;
const { documentType,sourceLanguage,targetLanguage} = this.state;
const values = { documentType,targetLanguage};
switch (step) {
case 1:
return (
<UploadFiles
nextStep={this.nextStep}
handleChange={this.handleChange}
values={values}
/>
);
case 2:
return (
<UserOptions
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange={this.handleChange}
handleSelection={this.handleSelection}
values={values}
/>
);
case 3:
return (
<Confirmation
nextStep={this.nextStep}
prevStep={this.prevStep}
values={values}
/>
);
case 4:
return <Success />;
default:
(console.log('This is a multi-step form built with React.'))
}
}
}
export default CreateNewOrder;
子组件
import React,{ Component } from 'react'
import Select from 'react-select'
import makeAnimated from 'react-select/animated'
const animatedComponents = makeAnimated();
export class UserOptions extends Component {
continue = e => {
e.preventDefault();
this.props.nextStep();
};
back = e => {
e.preventDefault();
this.props.prevStep();
};
render() {
const { values,handleChange,handleSelection } = this.props;
const languageOptions = [
{ value: 'English',label: 'English' },{ value: 'Spanish',label: 'Spanish' },{ value: 'Chinese(Simplified)',label: 'Chinese(Simplified)' },{ value: 'Chinese(Traditional)',label: 'Chinese(Traditional)' },{ value: 'Russian',label: 'Russian' },{ value: 'French',label: 'French' }
]
return (
<div className="form-container">
<h1 className="mb-5">User Options</h1>
<div className="form-group">
<label htmlFor="documentType">Document Type</label>
<input type="text" className="form-control" name="documentType" onChange={handleChange('documentType')} value={values.documentType} />
</div>
<div className="form-group">
<label htmlFor="sourceLanguage">Source Language</label>
<Select
isMulti
value = {values.sourceLanguage}
name = "sourceLanguage"
onChange={handleSelection}
closeMenuOnSelect={false}
components={animatedComponents}
options={languageOptions}
/>
</div>
<div className="form-group">
<label htmlFor="targetLanguage">Target Language</label>
<Select
isMulti
onChange={handleSelection}
closeMenuOnSelect={false}
components={animatedComponents}
options={languageOptions}
/>
</div>
<br />
<div className="row">
<div className="col-6">
<button className="btn btn-danger" onClick={this.back}>Back</button>
</div>
<div className="col-6 text-right">
<button className="btn btn-primary" onClick={this.continue}>Continue</button>
</div>
</div>
</div>
)
}
}
export default UserOptions;
所以你可以看到我有两个多选区域,它们依赖于相同的选项。所以我想做一个事件处理程序,根据您使用的下拉菜单更新 sourceLanguage 或 targetLanguage 。类似于对 onChange() 所做的事情。但我无法弄清楚如何做到这一点。请帮忙,我很沮丧。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。