时间戳

首页 > 解决方案 > 如何在反应中使用 OnClick 中的回调函数

javascript - 如何在反应中使用 OnClick 中的回调函数

问题描述

我有一个组件，我在映射数组的每个元素时使用它，如下所示：

                  <DropDown
                    options={OPERATIONS}
                    placeholder={"Select operation"}
                    value={setOperation}
                    parentWidth={"47%"}
                    childWidth={"20%"}
                    makeSelection={this.selectOperation, ()=>this.checkIndex(index)} //I need the index as well
                  />

我想checkIndex用作回调this.selectOperation

在 DropDown 组件中，是这样makeSelection使用的：

    {options.map((option, index) => {
      return (
        <li key={index} onClick={() => { makeSelection(option); this.toggleDropDown(); }}>
          <p>{option.name}</p>
        </li>
      );
    })}

这就是selectOperation 我的组件中定义的方式：

  selectOperation(op) {
    this.setState({
      setOperation: op
    })
  }

总而言之，我需要使用索引在我的数组中设置一个等于 的值setOperation，所以我需要在设置值时进行回调。

另外，我不能这样做， makeSelection={() => this.selectOperation}因为这会导致达到最大更新深度的问题

编辑：我应该提到我并没有尝试更改下拉菜单的结构，因为我没有编写该组件，所以我宁愿不更改它

标签： javascriptreactjs

解决方案

我怀疑您正在寻找的是如何将回调传递给允许您使用下拉菜单将数据传递回其他组件的组件。

这是一个非常简单的示例，没有更新状态。我为回调使用了相当通用的 onChange 属性名称，当调用它时，它会接收您提到的索引和option对象。您可以在该回调中发送您想要的任何内容并记录它收到的内容

const DropDown = (props) => {
  const { options, onChange } = props;
  
  const handleClick = (item, i) => {
    return (e) => {
      if (typeof onChange === "function") {
        // you decide what to send back to other component
        onChange(item, i);
      }
    };
  };
  return (
     <ul> {options.map((option, index) =>  (
          <li key={index} onClick={handleClick(option, index)}>
            <strong>{option.name}</strong>
          </li> )
     )}</ul> );
};

const App = () => {
  const options = [{ name: "foo" }, { name: "bar" }];
  // arguments determined by whatever is passed to it when called in DropDown comp
  const handleChange = (opt, i) => {
    console.log(`Name:${opt.name}, Index: ${i}`);
  };
  return (<DropDown options={options} onChange={handleChange} />);
};

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);
li{list-style:none; border:2px solid #ccc; width:100px; font-size:1.3em;padding:.5em; text-align:center}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<h3>Click item for result in console</h3>
<div id="react"></div>

推荐阅读