React-onChange后输入字段变为字符串

Question

我有一个包含三个组件的小应用程序

1. 父 => App
2. 儿子 => Courses
3. 孙子 => Course

应用程序状态位于App组件中，在Course组件中我有一个带有onChange事件的输入字段，配偶改变应用程序组件中的状态，问题是每次我输入输入都会更改为字符串而且我无法继续输入和更改状态。

值到达父级。

这是我的课程代码

import React, { Component } from 'react'

class Course extends Component {
    updatedGrade = (e) => {
        this.props.updateCourseGrade(Number(e.target.value), Number(e.target.id));

    };
    render() {
        const {id, courseType, courseName, courseGrade} = this.props.course;
        return (
            <tr key={id}>
                <td>
                    {courseName}
                </td>
                <td> 
                    {(courseType ? 'a' : 'm' )}
                </td>
                <td>
        {(courseGrade !== '' 
            ? courseGrade 
            : <input 
                type="number"
                id={id}
                onChange={this.updatedGrade}
                value={courseGrade}
            /> 
        )}
                </td>
                <td>
                    <button 
                        onClick={this.props.removeCourse.bind(this, id)}
                        style={btnStyle}
                    >
                        remove
                    </button>
                </td>
            </tr>
        )
    }
}

这是我的应用相关代码：

    class App extends Component {
  state = {
    courses: [
      {
        id: 1,
        courseName: 'bioliogy,
        courseType: false,
        courseHours: 10,
        courseGrade: ''
      },{
        id: 2,
        courseName: 'Mahematics,
        courseType: true,
        courseHours: 20,
        courseGrade: ''
      },{
        id: 3,
        courseName: 'History,
        courseType: false,
        courseHours: 30,
        courseGrade: 50
      }
    ]
  };



  updateCourseGrade(courseGrade, id){

    //const courseGradeNum = Number(courseGrade);
    this.setState({
      courses: this.state.courses.map(course => course.id === id ? {...course, courseGrade } : course)
    })
  console.log('courseGrade ', courseGrade);

现在，当我这样做时：

 updateCourseGrade(courseGrade, id){

    const courseGradeNum = Number(courseGrade);
    this.setState({
      courses: this.state.courses.map(course => course.id === id ? {...course, courseGradeNum } : course)
    })

在键入名为courseGrade 时，状态将获得一个新值，我不希望这样。 同样courseGrade 已经在Course 组件中定义为Number

我能做什么？也许我不应该在course 组件中使用值？

更新

根据 Freeman Lambda 的要求，这是我在输入字段中更改值后的状态， 所需课程更改的courseGrade 的状态。但是由于输入字段消失了，我无法继续输入。

链接到显示发生了什么的视频 https://www.screencast.com/t/Cyz1v6zMWsq

Answer 1

您应该为此使用更新程序功能，我认为正在发生的事情是状态更新正在分批。

所以不是

this.setState({
      courses: this.state.courses.map(course => course.id === id ? {...course, courseGradeNum } : course)
    })

试试

this.setState( prevState => ({
      courses: prevState.courses.map(course => course.id === id ? {...course, courseGradeNum } : course)
    }))

如果这不是问题，您是否可以创建一个代码沙箱，因为没有足够的代码来了解正在发生的事情。例如，updateCourseGrade 被绑定到任何地方。不知道你是没有还是只是没有显示。

Answer 2

这里：

    {(courseGrade !== '' 
            ? courseGrade 
            : <input 
                type="number"
                id={id}
                onChange={this.updatedGrade}
                value={courseGrade}
            /> 
        )}

只要courseGrade 是!== ''，您就明确地将输入更改为纯字符串

如果你想继续打字，你必须在打字时坚持输入。如果您希望输入在键入后消失，则必须添加一个按钮来控制移除输入的状态，例如：

class Course extends Component {
    state = {
        gradeValidated: false,
    }
    updatedGrade = (e) => {
        this.props.updateCourseGrade(Number(e.target.value), Number(e.target.id));

    };
    toggleGradeInput = (e) => {
        this.setState((state) => ({ gradeValidated: !state.gradeValidated }));

    };
    render() {
        const {id, courseType, courseName, courseGrade} = this.props.course;
        return (
            <tr key={id}>
                <td>
                    {courseName}
                </td>
                <td> 
                    {(courseType ? 'a' : 'm' )}
                </td>
                <td>
        {(this.state.gradeValidated 
            ? courseGrade 
            : <input 
                type="number"
                id={id}
                onChange={this.updatedGrade}
                value={courseGrade}
            /> 
        )}
                </td>
                <td>
                    <button 
                        onClick={this.toggleGradeInput}
                        style={btnStyle}
                    >
                        toggle input
                    </button>
                    <button 
                        onClick={this.props.removeCourse.bind(this, id)}
                        style={btnStyle}
                    >
                        remove
                    </button>
                </td>
            </tr>
        )
    }
}

Answer 3

问题来了

courseGrade !== '' 
            ? courseGrade 
            : <input 
                type="number"
                id={id}
                onChange={this.updatedGrade}
                value={courseGrade}
            /> 

如果您设置任何状态而不是''，则第一个条件设置为真，所以我的想法是为格栅使用保存按钮，onChange 保持本地状态。