Question

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

parent => App
Son => Courses
孙子=> Course

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

值到达父级。

这是我的课程代码

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被绑定到任何地方。不知道你是否没有，或者只是不显示它。

反应-输入字段在onChange之后变成字符串

3 个答案: