как мы можем выбрать мульти выбор из выпадающего в ANTD

Question

У меня есть два выпадающих списка в моем коде.Один - это список учителей, а другой - список курсов.Это должно действовать несколько выбора.Здесь статически я устанавливаю курсы для отдельных учителей. Если я нажму на любого учителя, этот курс, связанный с учителем, должен отображаться. Таким же образом у меня есть один общий список курсов.Я должен отображать список курсов также.Если какой-либо курс будет существовать при нажатии на учителя, я не предполагаю отображать этот курс в списке курсов.

import React from 'react'
import ReactDOM from 'react-dom'
import { Select, Button } from 'antd';

const  Option =Select.Option

const teacherInfo=['Vikram','Ramesh']

const courseInfo = ['CULT1A','CULT1B','CULT1C','CULT1D','CULT1E','CULT1F','HINDI1A','HINDI1B',
'HINDI1C','HINDI1D','HINDI1E','HINDI1F'];

const teacherCourseData={
    Vikram:['CULT1A','CULT1B','CULT1C','HINDI1A','HINDI1B'],
    Ramesh:['CULT1D','CULT1E','HINDI1E','HINDI1F']
}

class TeacherCourse extends React.Component{

    state={
        selectTeacherValue:teacherCourseData[teacherInfo[0]],
        selectCourseValue:teacherCourseData[teacherInfo[0]][0],
    }
    handleTeacherChange=
        (value)=>{
            this.selectTeacherValue=teacherCourseData[value]
            this.selectCourseValue=teacherCourseData[value][0]
          console.log(this.selectTeacherValue)
            }
    handleCourseChange=
    (value)=>{
        this.selectCourseValue=value

        console.log(this.selectCourseValue)

    }
    handleClick=()=>{
        console.log(this.selectCourseValue)
        console.log(this.selectTeacherValue)
        if(this.selectCourseValue === undefined || this.selectTeacherValue === undefined)
        {
            console.log("please select")
            return;
        }
        else{
            console.log("Sucessfully updated")
        }
    }

    render()
    {
        const {selectCourseValue,selectTeacherValue}=this.state
        {/*const filteredCourseOptions = courseInfo.filter(o => !selectCourseValue.includes(o));*/}
        return(
            <div align="center">
            <h2>Shishu Bharathi</h2>

            <label>Teacher List :</label>
            &nbsp;

                <Select defaultValue="Select" style={{ width: 120 }} 
                  onChange={this.handleTeacherChange}>
                  {teacherInfo.map(teacher=>(
                      <Option key={teacher}>{teacher}</Option>
                  ))}

                </Select>
                &nbsp;  &nbsp;


                <label>Course List :</label>
            &nbsp;
            <Select
          mode="multiple"
          placeholder="Please select"         
          onChange={this.handleCourseChange}
          style={{ width: 350 }}
        >
        {
            selectTeacherValue.map(course=>(    
                <Option key={course} >{course}</Option>
            )
           )
          }
        </Select>
                <br></br> 
                <br></br>                

                <Button onClick={this.handleClick}>Update</Button>        
            </div>
        )
    }
}

export default TeacherCourse

Answer 1

Вы довольно близки, но похоже, что вам не хватает функции setState из реакции.Например,

handleCourseChange = (value) => {
    this.selectCourseValue = value
    console.log(this.selectCourseValue)
}

станет

handleCourseChange = (value) => {
    this.setState({ selectCourseValue: value })
    console.log(this.state.selectCourseValue)
}

Для получения дополнительной информации о setState ознакомьтесь с официальной документацией реагирования: https://reactjs.org/docs/react-component.html#setstate