javascript - 在 ReactJS 中删除 onClick 元素？

Question

我有一个行组件，我正在将其导入到我的 App.js 组件中，显然我但删除函数似乎没有删除正确的行。即使我删除第二个，它也会先删除最后一个。所以基本上，如果我单击第二行上的删除，它应该删除第二行而不是第三行等。

我的 App.js 或我的根组件如下所示:-

import React, {Component} from 'react';
import './App.css';
import Row from './Row.js'

class App extends Component {
   state = {
      rows: [
       {value: 'row1', options:[1,2,3,4,5] },
       {value: 'row2', options:[1,2,3,4,5] },
       {value: 'row3', options:[ 1,2,3,4,5 ]}
     ]
  }

  updateValue = (e, idx) => {
  const rows = [...this.state.rows];
  rows[idx].value = e.target.value;
 this.setState({
  rows,
 });
}

addRow = () => {
const rows = [...this.state.rows, {value:'', options: [1,2,3,4,5}];
 this.setState({
    rows,
   });
 }

 deleteRow = (idx) => {
 const copy = [...this.state.rows]
 copy.splice(idx,1)
 this.setState ({
 rows:copy
  })
}

render() {
   return (
      <div>
    {
  this.state.rows.map ( (row,idx) => {
    return (
      <Row 
      key = {idx} 
      value = { row.value } 
      onChange = { (e) => this.updateValue(e,idx) } 
      delete = { this.deleteRow.bind(this,idx) } />
       )
    })
   }
 <button onClick = {this.addRow}> Add </button>
 </div>
     )
   }
} 

 export default App;

我的行组件如下所示:-

const Row = ( props) => {
let options = props.options.map(opt => <option key={opt}>{opt}</option>);

return (
   <div>
    <input value= { props.value } onChange={ props.onChange }></input>
    <select>
        {options}
    </select>
    <button onClick = { props.delete} > Delete </button>  
   </div>
  )
}

export default Row

我昨天问了类似的问题link但当时没有意识到这些项目没有从正确的位置删除？

Answer 1

试试这个

deleteRow = (item) => {
 let filtered = this.state.rows.filter(row=>row.value!==item.value);
 this.setState ({
 rows: filtered
  })
}

将行传递给删除函数

    <Row 
      key = {idx} 
      value = { row.value } 
      onChange = { (e) => this.updateValue(e,idx) } 
      delete = {()=>this.deleteRow(row) } />
       )

如果每行(对象)都有唯一的 id，则使用该 id 而不是值就像-

 let filtered = this.state.rows.filter(row=>row.id!==item.id);