Question

我要添加一个组件数组（组件在父对象中是子循环的），每个组件都附加有remove函数

parent.js

          ///loop runn ,components push to array
          <AddSet key={i} id={i} count={count}/>

child.js

          function handleRemove()
            {//here i wanna pass to parent the id od the div i click onto}
      //return
                <div id={props.id}>
                        <TextBox/>
                        <Button onClick={handleRemove()} >-</Button>
                <div>

我需要的是单击按钮（-）时要传递给“ this” div的父ID。

我已经用谷歌搜索，但是没有找到解决方案。

任何人都可以帮我解决这个问题，谢谢。

这是我正在研究的正确方法还是他们的其他最佳实践？

Answer 1

看看是否有帮助。

与您所描述的非常相似。

const arr = [
  {label: 'divA', id: 'divA'},
  {label: 'divB', id: 'divB'},
  {label: 'divC', id: 'divC'}
];

function App() {
  console.log('Rendering App...');
  
  const [active, setActive] = React.useState(['divA','divB','divC']);
 
  const divItems = arr.map((item,index) => {
    if (active.indexOf(item.id) >= 0) {
      return (
        <ChildDiv
          id={item.id}
          label={item.label}
          setActive={setActive}
        />
      );
    }
  });
  

  return(
    <React.Fragment>
      {divItems}
    </React.Fragment>
  );
}

function ChildDiv(props) {
  
  function removeDiv(id) {
    console.log('Removing ' + id);
    props.setActive((prevState) => {
      const aux = Array.from(prevState);
      return aux.filter((item) => {
        return item !== id;
      });
    });
  }

  return(
    <React.Fragment>
      <div style={{cursor:"pointer"}}>
        {props.label}
      </div>
      <button onClick={()=>removeDiv(props.id)}>Remove</button>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 2

-

更新为

handleRemove（props.id）}>-////有效

如何获取此元素的ID以从React挂钩中的数组中删除？

2 个答案: