Reactjs 在react中获取从子级到父级的索引

我有使用映射的子组件我正在渲染它我如何才能将索引传递给父组件方法

React版本是15，如何使用bind方法获取索引

// child.js

render(){
  return(
   {
    this.state.map((d, index) => {
      <p onClick={() => this.props.handleMethod(index)}>d</p>
    })

   }
  )
}

// parent.js

_handle =(self, index, id) => {
  console.log(self,index, id) // get o, 1, 2 what ever the index i clicked 
}

render(){
  return(
    <Child handleMethod={this._handle.bind(this, index, 123)}/> // how can i pass index here
  )
}

---

您试过了吗？

您需要在父组件的句柄函数中绑定所需的值。Bind将返回一个函数，该函数将传递给子函数，并使用项索引调用该方法

这些值的顺序很重要，首先您将获得在父组件中绑定的所有值，然后是从子组件传递的值

像这样：

render(){
  return(
    <div>
      {
        this.state.map((d, index) => (
          <p onClick={() => this.props.handleMethod(index)}>d</p>
        ))
      }
    </div>
  )
}

_handle = (selfIndex, id, index) => {
  console.log(index)
}

render(){
  return(
    <Child handleMethod={this._handle.bind(this, selfIndex, 123)}/>
  )
}

请尝试以下代码：

// Child
render() {
    const content = this.state.someValue.map((d, index)=>(
        <p onClick={() => this.props.handleMethod(index, 123)}>d</p>
    ));

    return(
        <React.Fragment>
            {content}
        </React.Fragment>
    )
}


// Parent

constructor(props) {
    super(props);
    this._handle = this._handle.bind(this);
}

_handle(index, extraParam){ // extraParam will hold 123
     console.log(index)
}

render() {
    return(
        <Child handleMethod={this._handle} />
    )
}

请注意，状态不能是数组。它应该是包含属性的对象。在我的示例中，属性是someValue，它是一个数组。

首先，\u handle函数使用箭头语法，因此不需要像普通函数那样绑定它。因为这个内部句柄总是指向你的类

// child.js

  render1(){
    return(
      this.state.map((d, index) => (
        <p onClick={() => this.props.handleMethod(index)}>d</p>
      ))
    )
  }

  // parent.js

  _handle = (index, id) => {
    // In arrow function, this alway point to this Class, you don't need to bind(this).
    console.log(this, index, id);
  }

  render(){
    return(
      <Child handleMethod={(index) => this._handle(index, 123)}/>
    )
  }

---

这里的实时版本：

parent.js中的console.logindex给了您什么？我需要三个参数来传递self、index和id。有任何答案对您有用吗？没有，我还需要获取这个。我需要在_句柄中获取三个参数我如何获取我删除了spread运算符我试图告诉你我传递了更多东西你想从子组件获取父组件的参数和索引？是的，三件事，方法上的自索引和id，如问题中获取7 123 0，尝试获取selfthis，然后0 index，123硬编码值对不起，您的问题中发生了什么变化？\u handle方法，我正在调用传递三个参数this的\u handle，从child开始索引，硬编码值为123。首先检查问题，您不需要从中传递任何参数。如果需要将123作为额外参数传递，则需要从子组件执行此操作，例如

this.props.handleMethodindex，123}>d

最后，不需要在渲染方法中绑定它。只需将这个_handle=this._handle.bindthis添加到您的构造中。我的要求是我需要从父级传递123，而不是从childLet us传递。您能检查更新的问题吗？我需要传递三个参数

// child.js

  render1(){
    return(
      this.state.map((d, index) => (
        <p onClick={() => this.props.handleMethod(index)}>d</p>
      ))
    )
  }

  // parent.js

  _handle = (index, id) => {
    // In arrow function, this alway point to this Class, you don't need to bind(this).
    console.log(this, index, id);
  }

  render(){
    return(
      <Child handleMethod={(index) => this._handle(index, 123)}/>
    )
  }