Reactjs，我该如何添加选择选项属性值来声明

Question

I have a small app that has a small form. the form has these fields:

Course- created mapping over a props object element called courseName

Select- a select field with fixed values.

Course grade- number type field.

In the app state I have two arrays:

1. courses: is the data that creates the form select options

2. newCourse: contains the data that is submitted in the form.

   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:[] }

I use

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

in order to update the state with the form field value.

My problem is that I want to add to the newCourse state values from the course props. I have added this data to the option attributes. my question is how can I retrieve the option attributes in order to add these values ( courseHours and coursePassGrade see courses const bellow) from course props to the newCourse state This is the form component

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

Try changing your courses const to this:

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

And your event handler to this:

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

Answer 2

It is correct for you, in App , to keep the state with your list of courses and then with any courses added through the submission of the form.

The addCourse handler which you pass from App to AddCourse should look something like this:

// 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 })

}

In AddCourse , when you call the addCourse handler, you pass up (to App ) all of the data that you have from the form ( courseName , courseGrade , and courseType ). You do not need to keep track of the corresponding coursePassGrade or courseHours in your AddCourse component. It can be the job of App to find those remaining attributes by searching in his this.state.courses based on the courseName that he was given.

As you can see from above, this is the job of getCourseByName :

// App.js

getCourseByName = (courseName) => {

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

}

This method looks up (in this.state.courses ) the course attributes based on the name, and it returns the entire course object. When you call this, in addCourse , you only care about the coursePassGrade and courseHours , which is what you use to continue building the newCourse object which will be pushed to this.state.newCourses

I have used your code to put together a CodeSandbox which shows these techniques in action. I hope it is helpful to you in giving you some direction.