Reactjs, как можно добавить значения атрибутов выбора в состояние

Question

У меня есть небольшое приложение, которое имеет маленькую форму. форма имеет следующие поля:

Course - созданное отображение на элементе реквизита с именем courseName

Выбор - поле выбора с фиксированными значениями.

Оценка курса - поле типа номера.

В состоянии приложения у меня есть два массива:

1. курсы: данные, которые создают параметры выбора формы

2. newCourse: содержит данные, представленные в форме.

   state = { courses: [ { id: 1, courseName: 'English', courseType: false, courseHours: 10, courseGrade: '', coursePassGrade: 55 },{ id: 2, courseName: 'Math', courseType: true, courseHours: 8, courseGrade: '', coursePassGrade: 55 },{ id: 3, courseName: 'Biology', courseType: false, courseHours: 30, courseGrade: 50, coursePassGrade: 70 } ], newCourses:[] }

Я использую

onChange(e) {
    this.setState({
         [e.target.name]: e.target.value });
}

для обновления состояния значением поля формы.

Моя проблема в том, что я хочу добавить к состоянию newCourse значения из реквизита course. Я добавил эти данные в атрибуты опции. у меня вопрос, как я могу получить атрибуты опции, чтобы добавить эти значения (courseHours и coursePassGrade см. courses const bellow) из course переходит в состояние newCourse Это компонент формы

import React, { Component } from 'react';
import { Form, Button, Col, Row } from 'react-bootstrap';

class AddCourse extends Component {

    state = {
        courseName: '',
        courseType: '',
        courseGrade: '',
        courseHours: '',
        coursePassGrade: ''
    }

    onChange(e) {
        console.log('e.target', e.target.coursehours);


        this.setState({
             [e.target.name]: e.target.value });
    }

    onSubmit = (e) => {
        e.preventDefault();
        this.props.addCourse(this.state);
        this.setState({
            courseName: '',
            courseType: '',
            courseGrade: ''
        })
    }
    render() {
        const courses = this.props.courses.map(course =>
            <option 
                key={course.id} 
                value={course.courseName} 
                coursehours={course.courseHours} 
                coursepassgrade={course.coursePassGrade}  
            >
                {course.courseName}
            </option>
        )

        return (
            <div>
                <Form onSubmit={this.onSubmit}>
                    <Row>
                        <Col>
                            <Form.Group controlId="exampleForm.ControlSelect1">

                                <Form.Control
                                    as="select"
                                    name="courseName"
                                    defaultValue={this.state.courseName}
                                    onChange={this.onChange.bind(this)}
                                >
                                <option value="">Course...</option>
                                    {courses}

                                </Form.Control>
                            </Form.Group>
                        </Col>
                        <Col>
                            <Form.Group controlId="formGridState">

                                <Form.Control as="select"
                                    name="courseType"
                                    defaultValue={this.state.courseType}
                                    onChange={this.onChange.bind(this)}
                                >
                                    <option value="">Select...</option>
                                    <option value="true">a</option>
                                    <option value="false">m</option>
                                </Form.Control>
                            </Form.Group>
                        </Col>
                        <Col>
                            <Form.Group controlId="formBasicGrade">
                                <Form.Control
                                    type="number"
                                    placeholder="Course grade"
                                    name="courseGrade"
                                    defaultValue={this.state.courseGrade}
                                    onChange={this.onChange.bind(this)}
                                />
                            </Form.Group>

                            <Form.Group controlId="courseHours">
                                <Form.Control
                                    type="hidden"
                                    name="courseHours"
                                    defaultValue={this.props.courseHours}

                                />
                            </Form.Group>
                        </Col>
                        <Col>
                            <Form.Group controlId="submit">
                                <Button variant="primary" type="submit">
                                    Submit
                        </Button>
                            </Form.Group>
                        </Col>
                    </Row>
                </Form>
            </div>
        )
    }
}

export default AddCourse

Answer 1

Правильно, в App, сохранить state с вашим списком курсов, а затем с любыми курсами, добавленными посредством отправки формы.

Обработчик addCourse, который вы передаете из App в AddCourse, должен выглядеть примерно так:

// App.js

addCourse = ({ courseName, courseType, courseGrade }) => {

  const { coursePassGrade, courseHours } = this.getCourseByName(courseName)
  const newCourse = {
      courseName,
      courseType,
      courseGrade,
      coursePassGrade,
      courseHours
    }
    const updatedNewCourses = [...this.state.newCourses]
    updatedNewCourses.push(newCourse)
    this.setState({ newCourses: updatedNewCourses })

}

В AddCourse, когда вы вызываете обработчик addCourse, вы передаете (до App) все имеющиеся у вас данные из формы (courseName, courseGrade и courseType) , Вам не нужно отслеживать соответствующие coursePassGrade или courseHours в вашем AddCourse компоненте. Задачей App может быть поиск этих оставшихся атрибутов путем поиска в его this.state.courses на основании courseName, которые ему дали.

Как вы можете видеть сверху, это работа getCourseByName:

// App.js

getCourseByName = (courseName) => {

  const index = this.state.courses.findIndex((course) => {
    return (course.courseName === courseName)
  })
  return this.state.courses[index]

}

Этот метод просматривает (в this.state.courses) атрибуты курса на основе имени и возвращает весь объект курса. Когда вы вызываете это, в addCourse вы заботитесь только о coursePassGrade и courseHours, которые вы используете для продолжения построения объекта newCourse, который будет перемещен в this.state.newCourses

Я использовал ваш код, чтобы собрать CodeSandbox, который показывает эти методы в действии. Я надеюсь, что это поможет вам дать вам некоторое направление.

Answer 2

Попробуйте изменить свои курсы const на это:

        const courses = this.props.courses.map((course, n) =>
            <option 
                key={course.id} 
                value={n} 
            >
                {course.courseName}
            </option>
        )

И ваш обработчик событий для этого:

    onChange(e) {
        const { courses } = this.props
        const n = e.target.value
        const { courseName, courseHours, coursePassGrade } = courses[n]
        this.setState({ courseName, courseHours, coursePassGrade, })
    }