reactjs - Form.Control 上的 ReactJS 多选不标记选定对象

问题描述

我一直在尝试实现多项选择，但看不到之前选择了哪些项目，这非常令人困惑。这是我的代码。
import React, { Component } from "react";
import StudentService from "../services/student.service";
import TeacherService from "../services/teacher.service";
import i18n from '../i18n';
import { Form, Button, Col } from 'react-bootstrap';

export default class CreateUser extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        isInCreationMode : false,
        name : undefined,
        headTeacherId : undefined,
        students : [],
        subjects : [],
        allStudents : undefined,
        allTeachers : undefined
      };
      this.handleNameChange = this.handleNameChange.bind(this);
      this.handleHeadTeacherChange = this.handleHeadTeacherChange.bind(this);
      this.handleStudentChange = this.handleStudentChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.contains = this.contains.bind(this);
    }
  
    componentDidMount() {
      StudentService.getAllStudentsWithNoClassAssociated()
      .then(response => response.json())
      .then(
        response => {
          this.setState({
            allStudents: response
          });
        },
        error => {
          this.setState({
            error:
              (error.response &&
                error.response.data &&
                error.response.data.message) ||
              error.message ||
              error.toString()
          });
        }
      );
      TeacherService.getAllTeachersWhoAreNotHeadTeachers()
      .then(response => response.json())
      .then(
        response => {
          this.setState({
            allTeachers: response
          });
        },
        error => {
          this.setState({
            error:
              (error.response &&
                error.response.data &&
                error.response.data.message) ||
              error.message ||
              error.toString()
          });
        }
      );
    }
 
    handleNameChange = event => {
        this.setState({ name: event.target.value })
    }
 
    handleHeadTeacherChange = event => {
        this.setState({ headTeacherId: event.target.value })
    }
 
    handleStudentChange = event => {
        var students = [...this.state.students];
        var chosenStudent = this.state.allStudents.filter(student => student.id.toString() === event.target.value)[0];
        if(students.map(stud => stud.id.toString()).includes(event.target.value)){
            if(chosenStudent){
                students.splice(students.indexOf(chosenStudent), 1);
            }
        } else {
            if(chosenStudent){
                students.push(chosenStudent);
            }
        }
        this.setState({students})
    }
 
    handleSubmit = event => {
        
    }
 
    contains = (array,value) => {
        for(var i = 0; i < array.length; i++){
            if(array[i].id === value){
                return true;
            }
        }
        return false;
    }

    render() {
      return (
        <div className="container offset-md-1.5 spacing-before-and-after grey-font">
          <h2 className="padding-above-50px">{i18n.t('create class.new class')}</h2>
  
          <hr />  
            <Form validated={this.state.validated} onSubmit={(value) => this.handleSubmit(value)}>
                  <Form.Row>
                      <Form.Group as={Col} md="5" controlId="exampleForm.ControlSelect1" />
                      <Form.Group as={Col} md="2" controlId="exampleForm.ControlInput1">
                          <Form.Label>{i18n.t('create class.name')}</Form.Label>
                          <Form.Control
                          name='name'
                          required
                          type="text"
                          isValid={this.state.name && !this.state.errorName}
                          isInvalid={this.state.errorName}
                          onChange={(value) => this.handleNameChange(value)}/>
                          <Form.Control.Feedback type="invalid">
                            {this.state.errorName}
                          </Form.Control.Feedback>
                      </Form.Group>
                  </Form.Row>
                  <Form.Row>
                      <Form.Group as={Col} md="3" controlId="exampleForm.ControlSelect1" />
                      <Form.Group as={Col} md="6" controlId="exampleForm.ControlSelect1">
                            <Form.Label>{i18n.t('create class.head teacher')}</Form.Label>
                            <Form.Control
                            name='headTeacher' 
                            as="select" 
                            defaultValue={''}
                            isValid={this.state.headTeacherId}
                            isInvalid={this.state.errorHeadTeacherId}
                            onChange={(value) => this.handleHeadTeacherChange(value)}>
                                {this.state.allTeachers && this.state.allTeachers.map(teacher => 
                                    <option key={teacher.id} value={teacher.id}>
                                        {teacher.firstName + ' ' + teacher.lastName}
                                    </option>
                                )}
                            </Form.Control>
                            <Form.Control.Feedback type="invalid">
                            {this.state.errorHeadTeacherId}
                            </Form.Control.Feedback>
                        </Form.Group>
                    </Form.Row>
                  <Form.Row>
                    <Form.Group as={Col} md="3" controlId="exampleForm.ControlSelect1" />
                    <Form.Group as={Col} md="6" controlId="exampleForm.ControlSelect1">
                            <Form.Label>{i18n.t('create class.students')}</Form.Label>
                            <Form.Control multiple className={'form-control-multiple-500px'}
                            name='students' 
                            as="select" 
                            isValid={this.state.studentId}
                            isInvalid={this.state.errorStudentId}
                            onChange={(value) => this.handleStudentChange(value)}>
                                {this.state.allStudents && this.state.allStudents.map(student => 
                                    <option key={student.id} value={student.id}
                                        selected={this.contains(this.state.students, student.id)}>
                                        {student.firstName + ' ' + 
                                        (student.middleName ? (student.middleName + ' ') : '') + 
                                        student.lastName}
                                    </option>
                                )}
                            </Form.Control>
                            <Form.Control.Feedback type="invalid">
                            {this.state.errorStudentId}
                            </Form.Control.Feedback>
                        </Form.Group>
                  </Form.Row>
              <Button type="submit" active={!this.state.errors} size="lg" className="spacing-beneath-50px spacing-above-25px">
                  {i18n.t('create class.save')}
              </Button>
          </Form>
          {this.state.message && (
              <div className="form-group">
                <div
                  className={
                    this.state.successful
                      ? "alert alert-success"
                      : "alert alert-danger"
                  }
                  role="alert"
                >
                  {this.state.message}
                </div>
              </div>
            )}
        </div>
      );
    }
  }
你认为可能是什么问题？我实现了自己的包含以对其进行调试。当我有 3 个选定的学生（例如）但标记的只是添加的最后一个学生时，它返回 true。如何将它们全部标记？
标签： reactjsformsmultiple-select
reactjs - Form.Control 上的 ReactJS 多选不标记选定对象

问题描述

解决方案

推荐阅读
