Javascript 子组件中的事件返回'；未捕获类型错误：无法读取属性'；价值'；未定义的

实际上，我是新手，在学习提升状态的教程时，我在尝试修改Child.js中的值时遇到了问题。它拒绝未定义的错误。第二个问题：当属性是value而不是defaultValue时，为什么不可能修改输入值

提前谢谢

Parent.js

 import React,{Component} from 'react';
import Child from './child';

export default class Parent extends Component{

    constructor(props){
        super(props);

        this.change= this.change.bind(this)

        this.state={
            num:0
        }
    }

    onChangeValuebyChild(event){
       /* this.setState({
            num: document.getElementById('haha').value
        })*/

        this.setState({
            num: parseFloat(event.target.value)
        })
    }

    change(event){

        this.setState({
           num: event.target.value
       })
   }


   render(){
       const val= parseFloat(this.state.num)
       return (<div>
            <input defaultValue={val} onChange={(event)=>this.change(event)}/>
            {val}
            <Child numero={val} onChangeByParent={(e)=>this.change(e)}/>
            <Child  numero={val} onChangeByParent={this.change}/>
        </div>)
    }
}

import React，{Component}来自'React'；
从“./Child”导入子项；
导出默认类父扩展组件{
建造师（道具）{
超级（道具）；
this.change=this.change.bind（this）
这个州={
数字：0
}
}
onChangeValuebyChild（事件）{
/*这是我的国家({
num:document.getElementById（'haha'）.value
})*/
这是我的国家({
num:parseFloat（event.target.value）
})
}
变化（事件）{
这是我的国家({
num:event.target.value
})
}
render（）{
const val=parseFloat（this.state.num）
返回(
this.change（event）}/>
{val}
这个。更改（e）}/>
)
}
}

Child.js

   import React, {Component} from 'react';

export default class Child extends Component{
    constructor(props){
        super(props)
        this.onHandlee=this.onHandle.bind(this)
        this.input=React.createRef()
    }


    onHandle(e){

        this.props.onChangeByParent(e.target.value)
    }

    render(){
        const val = parseFloat(this.props.numero);
        return(<div>
            <input
            id='haha' ref={this.input}
             defaultValue={val}
             onChange={(e)=> this.onHandle(e)}
             /> {val}
        </div>)
    }
}

import React，{Component}来自'React'；
导出默认类子扩展组件{
建造师（道具）{
超级（道具）
this.onHandlee=this.onHandle.bind（this）
this.input=React.createRef（）
}
onHandle（e）{
this.props.onChangeByParent（e.target.value）
}
render（）{
const val=parseFloat（this.props.numero）；
返回(
this.onHandle（e）}
/>{val}
)
}
}

您使用onChangeByParent（）作为onChangeByParent（值）

因此，请将您的代码更改为以下代码：

change(value){

    this.setState({
       num: value
   })
}

---

用这把小提琴解决了你的问题：

• 您在构造函数中有一个输入错误：this.onHandlee=this.onHandle.bind（this）；应该是this.onHandle=this.onHandle.bind（this）

您所做的错误发生在您的家长身上，您有：

change(event){

    this.setState({
       num: event.target.value
   })
 }

它接受一个事件，您在这里从子级传递一个值。

onHandle(e){
        this.props.onChangeByParent(e.target.value)
    }

将此更改为

onHandle(e){
        this.props.onChangeByParent(e)
    }

• 当您为输入属性赋值时，它就像是说输入元素的当前值。如果正在使用so，请使用状态进行更改： 示例：

  {this.setState（{inputVal:e.target.value}}}/>

  ，使用defaultValue时，它是分配给输入的初始值

---

您的绑定在孩子的构造函数中有一个输入错误：

this.onHandlee=this.onHandle.bind（this）

您最近在这里回答了

onHandlee

（顺便说一句，这不是您问题的答案）我看不到similarity@Bayram已经解决了你的问题检查我发布的答案，问题在于父回调函数接受的参数