问题描述
我一直在努力实现多选择,但不能看到哪个项目被先前选择的这是非常混乱。这是我的代码。
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是只有最后一个加入。如何将它们全部标记?
解决方法
只保留您所在州的选定学生 ID 怎么样?然后您可以根据这些 id 来显示或不显示标记
handleStudentChange = (event) => {
const selected = parseInt(event.target.value,10)
const { students } = this.state
const newStudents = students.includes(selected)
? without(students,selected)
: [...students,selected]
this.setState({ students: newStudents })
}
我正在使用 lodash https://lodash.com/docs/4.17.15#without