类型错误:无法设置未定义 App.inputChangeHandler 的属性“eName" [英] TypeError: Cannot set property 'eName' of undefined App.inputChangeHandler

问题描述

一旦用户更新输入收件箱，显示的 eName 应该会改变.它没有更新数组.这是什么原因造成的?

错误信息:

<块引用>

TypeError: 无法设置未定义 App.inputChangeHandler 的属性eName"

代码:

class App 扩展组件 {状态= {产品:[{eName:"Anu", eNo:"1200", eSalary:"1000"},{eName:"Jack", eNo: "1201", eSalary:"1200"},{eName:"Ben", eNo: "1202", eSalary:"1300"}],显示标志:真，}inputChangeHandler(事件，索引){const mProducts = this.state.product;mProducts[index].eName = event.target.value;console.log(event.target.value);this.setState({产品:m产品})}删除处理程序(索引){console.log("删除点击" + index);const mProducts = this.state.product;mProducts.splice(index,1);this.setState({产品:m产品})}showHideHandler=()=>{this.setState({showFlag:!this.state.showFlag})console.log(this.state.showFlag);}使成为(){让 dp = 空；如果(this.state.showFlag === true){dp =(<div className ="应用程序">{this.state.product.map((product,index) => {返回 (<产品eName={product.eName}eNo={product.eNo}eSalary={product.eSalary}键 ={索引}点击 ={this.deleteHandler.bind(this.index)}inputChange={this.inputChangeHandler.bind(this)}/>)})}

)}返回(<div className ="应用程序">{dp}<小时/><button onClick={()=>this.showHideHandler()}>显示隐藏</button><h2>{this.state.eName} </h2>

);}}导出默认应用程序；

一旦用户更新输入收件箱，显示的 eName 应该会改变.它没有更新数组.

解决方案

您还应该将 index 传递给您的 Product 组件，

{this.state.product.map((product,index) => {返回 (<产品eName={product.eName}eNo={product.eNo}eSalary={product.eSalary}键 = {索引}ind = {index}//这里传递索引点击 ={this.deleteHandler.bind(this.index)}inputChange={this.inputChangeHandler.bind(this)}/>)})}

你的 Product 组件应该是这个 (根据你的评论)，

从 'react' 导入 React导入'./employee.css'函数员工(道具){返回 (<div className ="prod"><h1>名称:{props.eName}<h2>Emp-No:{props.eNo}</h2><h3>薪水:{props.eSalary}</h3><button onClick ={props.click}>删除<input onChange={(e) =>props.inputChange(e,props.ind)} value={props.eName} type="text"/>//传递`事件` &`index` 到 `inputChange` 函数在这里

)}导出默认员工；

Once the user updates the input inbox displayed eName should change. It is not updating the array. What is causing this?

Error message:

TypeError: Cannot set property 'eName' of undefined App.inputChangeHandler

Code:

class App extends Component {
  state= {
    product:[
      {eName:"Anu", eNo:"1200", eSalary:"1000"},
      {eName:"Jack", eNo: "1201", eSalary:"1200"},
      {eName:"Ben", eNo: "1202", eSalary:"1300"}
    ],
    showFlag:true,
  }

  inputChangeHandler(event,index){
    const mProducts = this.state.product;
    mProducts[index].eName = event.target.value;
    console.log(event.target.value);
    this.setState({
       product:mProducts
    })
  }

  deleteHandler(index){
    console.log("delete clicked" + index);
    const mProducts = this.state.product;
    mProducts.splice(index,1);
    this.setState({
      product:mProducts
    })
  }

  showHideHandler=()=>{
    this.setState({
      showFlag:!this.state.showFlag
    })
    console.log(this.state.showFlag);
  }

  render(){
    let dp = null;
    if (this.state.showFlag === true){
      dp =(
        <div className ="App">
          {this.state.product.map((product,index) => {
            return (
            <Product
              eName={product.eName}
              eNo={product.eNo}
              eSalary={product.eSalary}
              key ={index}
              click ={this.deleteHandler.bind(this.index)}
              inputChange={this.inputChangeHandler.bind(this)}
            />)
          })}
        </div>
      )
    }
    return(
      <div className ="App">
        {dp}
        <hr/>
        <button onClick={()=>this.showHideHandler()}>show hide</button>
        <h2>{this.state.eName} </h2>
      </div>
    );
  }
}

export default App;

Once the user updates the input inbox displayed eName should change. It is not updating the array.

解决方案

You should also pass the index to your Product component,

{this.state.product.map((product,index) => {
  return (
    <Product
      eName={product.eName}
      eNo={product.eNo}
      eSalary={product.eSalary}
      key = {index}
      ind = {index}   //pass index here
      click ={this.deleteHandler.bind(this.index)}
      inputChange={this.inputChangeHandler.bind(this)}
    />
  )
})}

your Product component should be this (as per your comment),

import React from 'react'
import './employee.css'
function Employee(props) { 
    return (
        <div className ="prod"> 
            <h1> Name:{props.eName}</h1> 
            <h2> Emp-No:{props.eNo}</h2> 
            <h3> Salary:{props.eSalary}</h3> 
            <button onClick ={props.click}> delete</button> 
            <input onChange={(e) => props.inputChange(e,props.ind)} value={props.eName} type="text"/>  //pass `event` & `index` to `inputChange` function here
        </div>
    ) 
}
export default Employee;

这篇关于类型错误:无法设置未定义 App.inputChangeHandler 的属性“eName"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！