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

Posted 2023-02-22

【中文标题】React-onChange后输入字段变为字符串

【英文标题】：React- input field turns to string after onChange

【发布时间】：2019-07-29 09:02:25

【问题描述】：

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

父 => App 儿子 => Courses 孙子 => 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

【问题讨论】：

尽量不要使用onChange，而是使用onInput，并使用e.currentTarget.value而不是e.target.value

不...还是一样的结果

我无法清楚地理解您的updateCourseGrad 发生了什么，以及您实际上希望在那里发生什么。您能否通过App 在执行updateCourseGrade 之前和之后的状态示例来扩展问题？

我已经扩展了我的问题，我希望能够输入多个数字

我添加了一个视频链接，显示发生了什么

【参考方案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 被绑定到任何地方。不知道你是没有还是只是没有显示。

【讨论】：

如果状态更新功能对您来说是新的http://joshpitzalis.com/setState

【参考方案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>
        )
    

【参考方案3】：

问题来了

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

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