Поле ввода React- превращается в строку после onChange

Question

У меня есть небольшое приложение с тремя компонентами

1. parent => App
2. Son => Courses
3. Grandchild => 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 уже определен как Number в Course компоненте

Что я могу сделать?может быть, мне не следует использовать значение в компоненте course?

ОБНОВЛЕНИЕ

Согласно запросу Freeman Lambda, это состояние после того, как я изменил значение вполе ввода, состояние courseGrade желаемого курса изменяется.но так как поле ввода исчезает, я не могу продолжать печатать.

Ссылка на видео, которое показывает, что происходит https://www.screencast.com/t/Cyz1v6zMWsq

Answer 1

Здесь:

    {(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 2

Проблема здесь

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

первое условие имеет значение true, если вы установите любое состояние вместо '', поэтому я предлагаю использовать кнопку сохранения для решетки, и onChange сохранитместное государство.

Answer 3

Вы должны использовать функцию обновления для этого, я думаю, что происходит то, что обновления состояния становятся пакетными.

Так что вместо

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 привязан где угодно.не знаю, если у вас нет или просто не показывает его.