javascript - 在 React JS 中添加和删除 onClick 元素？

Question

我是 React JS 的新手，我正在尝试在单击按钮时创建新的组和行。因此，我有一个名为 groups 的数组，它为我提供了 Parent 组件，然后另一个名为 rows 的数组循环并提供了 Row 组件。我有 2 个方法，addRow 和 addGroup 来动态添加新的父组件和行组件。但是每次我添加或删除一行时，似乎都会从所有组中添加和删除。如何使每个组和行彼此分开？

这就是我的 App.js 文件的样子:-

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

class App extends Component {
  state = {
    rows: [
      {id:0,value: 'row1', options:[1,2,3,4,5] }
    ],
    groups : [
      { id:0, title: 'New Group' }
    ],
  }

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

  addNewGroup = () => {
    const groups = [...this.state.groups, { id:this.state.groups.length, title: 'New Group'}]
    this.setState({
      groups
    })
  }

  addRow = () => {
    const rows = [...this.state.rows, {id: this.state.rows.length ,value:'',options: []}];
    this.setState({
      rows,
    });
  }

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

  render() {
    return (
      <div className = "App">
      {
        this.state.groups.map ( (group,idx) => {
          return (
            <Parent
            key = {idx}
            title = {group.title }
            rows = { this.state.rows }
            deleteRow = {this.deleteRow.bind(this) }/>
          )
        })
      }
      <button onClick = {this.addRow}> Add </button>
      <button onClick = {this.addNewGroup }>Add Group  </button>
      </div>
    )
  }
}
export default App;

这就是我的父组件的样子:-

import React from 'react'
import Row from './Row.js'

const Parent = (props) => {
  return (
    <div>
    <h4>{ props.title }</h4>
    {
      props.rows.map( (row,idx) => {
        return (
          <Row
          key = {idx}
          index = {idx}
          value = { row.value }
          options = { row.options }
          delete = { () => { props.deleteRow(row) } }/>
        )
      })
    }
    </div>
  )
}

export default Parent;

这是我的行组件:-

import React from 'react'
import './Row.css'

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

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

export default Row

所以基本上 addGroup 应该给我一个新组，我应该能够单独添加和删除行，而不影响其他组中的行。谢谢。

Answer 1

我对你的内容进行了一些修改。它的要点是每个组都拥有一个行数组，它们并不像您在示例中那样是分开的。当你想修改一个组时，传入它的id，当你想修改一行时，传入它的组的id和它的(行)id。在完美的世界中，您将为每个行生成 UUID，因此您只需传入行的 id 即可更新/删除它。 React 的一个很酷的事情是组件结构最终应该镜像数据结构。 <App> ->很多<Group> s -> 每个组有很多<Row> s。

const { Component } = React;
const options = [1, 2, 3, 4, 5];

class App extends Component {
  state = {
    groups : [
      { id: 0, title: 'New Group', rows: [{ id: 0,value: 'row1', options }] }
    ],
  }

  // this isn't hooked up to anything yet
  updateValue = (e, rowId, groupId) => {
    let groups = [...this.state.groups];

    groups = groups.map(group => {
      if (group.id === groupId) {
        group.rows = group.rows.map(row => {
          if (row.id === rowId) {
            row.value = e.target.value;
          }

          return row
        })
      }

      return group;
    });

    this.setState({ groups });
   }

   addNewGroup = () => {
    const groups = [...this.state.groups, { id:this.state.groups.length, title: 'New Group', rows: [] }]
    this.setState({ groups });
  }
  
  removeGroup = (groupId) => {
    const groups = this.state.groups.filter(group => group.id !== groupId);
    
    this.setState({ groups });
  }

  addRow = (groupId) => {
    let groups = [...this.state.groups];

    groups = groups.map(group => {
      if (group.id === groupId) {
        const id = group.rows.length;
        group.rows.push({ id, value: `row${id}`, options })
      }

      return group;
    });

      this.setState({ groups });
   };

  deleteRow = (rowId, groupId) => {
    let groups = [...this.state.groups];

    groups = groups.map(group => {
    console.log(group, rowId)
      if (group.id === groupId) {
        group.rows = group.rows.filter(row => row.id !== rowId)
      }

      return group;
    });

    this.setState ({ groups });
  }

render() {
  return (
    <div className = "App">
     {this.state.groups.map ( (group, idx) => (
       <div>
          <Parent
            key={idx}
             title={group.title}
             group={group}
             removeGroup={this.removeGroup.bind(this)}
           />
           <button onClick = {() => this.addRow(group.id)}> Add Row </button>
           <button onClick = {() => this.removeGroup(group.id)}> Remove Group </button>
       </div>
      ))}
      
      <button onClick = {this.addNewGroup }>Add Group  </button>
   </div>
    )
  }
}

const Parent = (props) => {
  return (
     <div>
       <h4>{ props.title }</h4>
       {props.group.rows.map((row, idx) => (
           <Row
             key={idx}
             index={idx}
             value={ row.value }
             options={ row.options }
             delete={() => { props.deleteRow(row.id, props.group.id) }}
           />
         ))
       }
     </div>
    )
}

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

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


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

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