事件处理结合 .map 函数

Question

假设我有一个这样的父组件：

export default class InputView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nr: [2, 3],
    };
  }

 handleDel = () => {
    console.log('klick');
  };

 render() {
    const elements = this.state.nr.map(inputPdf(nr));
    return (
      <div>
         {elements}
      </div>
    );
  }
}

函数 inputPdf() 创建另一个组件；

const inputPdf = (nr) => {
  return (
    <div class="card">
      <button type="button" class="close" aria-label="Close" onClick={this.props.handleDel()}>      </button>
    </div>
  );
};

现在我想在我的子组件中使用函数 handleDel()。

如何获得这个运行...？

Answer 1

这就是我们可以做到的。

export default class InputView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nr: [2, 3],
    };
  }

  handleDel = (indexToDelete) => {
    console.log("klick");
  };
  render() {
    const elements = this.state.nr.map((elem, index) => {
      return <InputPdf item={elem} index={index} handleDel={handleDel} />
    });
    return <div>{elements}</div>;
  }
}

const InputPdf = (props) => {
  
  return (
    <div class="card">
      <button
        type="button"
        class="close"
        aria-label="Close"
        onClick={() => props.handleDel(props.index)}
      >
        Delete
      </button>
    </div>
  );
};

如果有帮助请告诉我

Answer 2

代码中存在一些问题。但如果你想走自己的路。应该是这样的：

import React from "react";
import "./style.css";

class InputView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nr: [2, 3],
    };
  }

 handleDel = () => {
    console.log('klick');
  };

 render() {
    const elements = this.state.nr.map((data) => inputPdf(data,this.handleDel));
    return (
      <div>
         {elements}
      </div>
    );
  }
}

const inputPdf = (nr,onClick) => {
  return (
    <div class="card">
      <button type="button" class="close" aria-label="Close" onClick={onClick}> 
      {nr}     </button>
    </div>
  );
};

export default function App() {
  return (
    <div>
      <InputView/>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

这是演示：https://stackblitz.com/edit/react-txqp8k

代码中的问题：

组件名称应大写
而不是渲染 {elements} 你可以像这样在 render 中直接渲染组件

更好的方法：

  return this.state.nr.map(data => <InputPdf onClick={this.handleDel} nr={nr}/>)
    //where
   const InputPdf = ({nr,onClick}) => {
    return (
      <div class="card">
       <button type="button" class="close" aria-label="Close" onClick={onClick}> 
         {nr}     </button>
      </div>
     );
     }

事件处理结合 .map 函数

Eventhandling in combination with the .map function

event-handling

reactjs

react-props

react-functional-component