javascript - 为什么在 React 中需要两次绑定(bind) onClick？

Question

我有一个 LandingPageComponent，它有一个子组件 DisplayStudent

我在 LandingPageComponent 中有一个函数 deleteStudent。我将此函数作为 Prop 传递给 DisplayStudent 但我不明白为什么我需要在 LandingPageComponent 和 中绑定(bind) function deleteStudent >DisplayStudent 也是

单击删除按钮时我需要获取 id 在 jsFiddle 上查看此内容

jsfiddle

import React, {
  Component
} from 'react';
import DisplayStudent from './DisplayEmployeeComponent'

var data = [{
    name: 'student-1',
    id: 1
  },
  {
    name: 'student-2',
    id: 2
  },
  {
    name: 'student-3',
    id: 3
  }
];

export default class LandingPage extends Component {
  deleteStudent(e) {
    console.log('hi', this, e)
  }

  render() {
    return ( <
      div >
      <
      DisplayStudent studentData = {
        data
      }
      deleteStudent = {
        this.deleteStudent.bind(this)
      } // BINDING FIRST TIME
      /> < /
      div >
    )
  }
}

export default function(props) {
  return (
    props.studentData.map((ele) => {
      return ( <
        div key = {
          ele.id
        }
        style = {
          {
            display: 'flex',
            padding: '9px 5px 7px 4px'
          }
        } >
        <
        div > {
          ele.name
        } < /div>

        <
        button onClick = {
          props.deleteStudent.bind(this, ele.id)
        } // binding second time
        >
        Delete <
        /button> < /
        div >
      )
    })
  )
}

Answer 1

没有.bind(this)，deleteStudent里面的this指向全局对象(window)，不是你的组件。

了解更多关于 bind 的信息和 this .