Question

我有使用map的子组件，我正在渲染它如何将索引传递给父组件方法。

反应版本为15，我怎么也可以使用bind方法获得索引

{
    "compilerOptions": {
      "target": "esnext",
      "moduleResolution": "node",
      "esModuleInterop": true,
      "isolatedModules": true,
      "strict": true,
      "noEmit": true,
      "allowJs": true,
      "resolveJsonModule": true,
      "jsx": "react"
    },
    "include": [
      "src"
    ]
  }

Answer 1

this.props.handleMethod.bind(this, index, param1, param2)

handleMethod(index, param1, param2) {
}

您尝试过吗？

Answer 2

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

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

赞：

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)}/>
  )
}

工作示例：

class Child extends React.Component {
  render(){
    return(
      <div>
        {
          [1,2,3,4].map((d, index) => (
            <p onClick={() => this.props.handleMethod(index)}>{d}</p>
          ))
        }
      </div>
    )
  }
}

class Parent extends React.Component {

  _handle (selfIndex, id, index) {
    console.log(selfIndex, id, index)
  }

  render(){
    const selfIndex = 7;
    return(
      <Child handleMethod={this._handle.bind(this, selfIndex, 123)}/>
    )
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'))

p {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id='app' />

Answer 3

请尝试以下代码：

// 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} />
    )
}

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

Answer 4

首先，_handle函数使用箭头语法，因此您不需要像普通函数一样bind(this)。因为this中的_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)}/>
    )
  }

此处为实时版本：https://codesandbox.io/s/4r06wz4vn4?fontsize=14

在反应中从子索引到父索引

4 个答案: