反应选择多 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 (将#修改为@）