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

Question

我有一个小型的小型应用程序。 表单具有以下字段：

在名为courseName的props对象元素上进行课程创建的映射

选择-具有固定值的选择字段。

课程成绩编号类型字段。

在应用程序状态下，我有两个数组：

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参见course const bellow）添加到{{1} }状态 这是表单组件

newCourse

Answer 1

尝试将您的课程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, })
    }

Answer 2

在App中，将state保留在您的课程列表中，然后再通过提交表单添加的所有课程，对您来说是正确的。

您从addCourse传递到App的{​​{1}}处理程序应如下所示：

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，{ {1}}和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对象的原因，该对象将被推送到{ {1}}

我已使用您的代码将CodeSandbox组合在一起，以展示这些技术的实际应用。希望对您有所帮助。