无法访问作为道具发送的功能答案

【问题标题】：Unable to access a function which is sent as a props无法访问作为道具发送的功能
【发布时间】：2021-01-13 07:02:21
【问题描述】：

我有一个反应服务器正在运行，我的目的是在复选框中有任何更改时console log 一些数据。

我有两个 jsx 文件第一个 Todo.jsx 正在映射数据并将其发送到其他 jsx 文件 Option.jsx 返回一个 JSX 组件，最后我使用 Todo.jsx 文件在我的应用程序中显示组件.

Todo.jsx

import Option from "./Option";
const Obj = [
  {
    id: 1,
    name: "A Sample data",
    user: "XYZ"
  },
.
.
.  // data objects
];
// data of the todo list 

class Todo extends React.Component {
  constructor(){
    super()
    this.state={
      components : Obj
    }
    this.Change =  this.Change.bind(this)
    
  }
Change(id){                   // the function that I am passing as props
    console.log("Changed",id)    
  }
  
  render(){
    var Components = this.state.components.map(function (obj) {
      return <Option key={obj.id} name={obj.name} user={obj.user} Change = {this.Change} />;
    });
    return (<div>{Components}</div>)
  }
  
}

export default Todo;

Option.jsx

只有一个返回组件的函数

function Option (props) {
  
    return (
      <div
        className="m-todo"
        style={{ backgroundColor: props.user ? "orangeRed" : "green" }}
      >
        <p style={{ color: "white", fontSize: 18 }}>
          <input type="checkbox"  onChange={()=>{props.Change(props.id)}}></input> {props.name}:
        </p>
        <hr />
        <p >{props.user}</p>
      </div>
    );
  }

我无法理解我错过了什么。函数永远无法识别，当我尝试console.log(props) 时，它会显示undefined

【问题讨论】：

标签： javascript reactjs function ecmascript-6

【解决方案1】：

基本问题是由于this 关键字的scope 和在映射数据时使用的调用方式。

在您的Todo 组件中，当您进行映射时，您将像正常的ES5 函数一样使用回调，因此scope is lost 和Change 处理函数作为undefined 传递。试试这个：）

  render() {
    var Components = this.state.components.map((obj) => {
      return (
        <Option
          key={obj.id}
          name={obj.name}
          user={obj.user}
          change={this.change}
        />
      );
    });
    return <div>{Components}</div>;
  }

完整代码： https://codesandbox.io/s/here-i-am-qvx3h?file=/src/App.js:514-789

更新：另一种解决方案是使用 ES6 箭头函数作为您的 Change 处理程序方法 :)

注意：最好使用小写的函数名。就像我在我的代码中所做的那样：）谢谢！！！

【讨论】：

使用此代码，不要忘记在“选项”组件中也将函数名称重写为小写。在本地为我工作。
已经这样做了 :) 谢谢 :) 让我再检查一下我是否错过了它。总的来说我做到了
@ImranRafiqRather 函数函数在 es5 和 es6 中的工作方式是否有任何变化。我所听到的是，当你使用箭头函数时，你会得到一种很酷且简单的书写方式。你的代码对我有用。但是，您能否更深入地告诉我幕后发生的事情，或者一些参考资料会有所帮助！谢谢
让我回答这个问题Is there any changes in how function functions work in es5 vs es6。答案是肯定的，其实变化很大。
为了帮助自己更多地阅读这些文章：medium.com/@User3141592/… 和这个medium.com/@joespinelli_6190/…

【解决方案2】：

我认为你没有提供“id”：

<Option key={obj.id} name={obj.name} user={obj.user} id={name={obj.id}} Change = {this.Change} />;

【讨论】：

@Do van Thang：这是次要的事情。 prop Change 函数作为 undefined 传递给子组件这就是问题所在:-)

【解决方案3】：

改变你的功能

Change = (id) => {                   // the function that I am passing as props
  console.log("Changed",id)    
}

【讨论】：