javascript - 如何将带有索引元素的函数传递到组件中？

Question

当模态出现时，我想删除列表项。从应用程序组件中，我想将删除函数传递给“模态”组件。当模态出现时 -> 我单击删除 -> 列表中的元素消失？如何将已删除项目的索引移动到模态？

单击 li 内的十字图标 --> 显示模态 --> 单击删除 --> 删除元素

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Modal from "./components/Modal";

class App extends Component {
  constructor(props) {
    super(props);

   this.state = {
     isOpen: false,
     arrays: [],
     index: null
   };
  }

  remove = index =>
    this.setState({
      arrays: [
        ...this.state.arrays.slice(0, index),
        ...this.state.arrays.slice(index + 1)
      ],
      isOpen: false
    });

  toggleModal = () => {
     this.setState({
      isOpen: !this.state.isOpen,
      index: index
    });
  };

render() {
   return (
      <div className="App">

        <ul>
          {this.state.arrays.map((array, index) => (
            <li key={index}>
              {array.name}
              <i className="fa fa-cross" onClick={() => 
             this.toggleModal(index)}/>
            </li>
          ))}
         </ul>

        <Modal
          show={this.state.isOpen}
          index={this.state.index}
          onRemove={this.remove}
          onClose={this.toggleModal}
        />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

组件/modal.js

import React, { Component } from "react";

 class Modal extends Component {
    render() {
    // Render nothing if the "show" prop is false
   if (!this.props.show) {
      return null;
    }

    // The gray background
   const backdropStyle = {
      position: "fixed",
      top: 0,
      bottom: 0,
     left: 0,
     right: 0,
     backgroundColor: "rgba(0,0,0,0.3)",
      padding: 50
    };

   // The modal "window"
    const modalStyle = {
      backgroundColor: "#fff",
      borderRadius: 5,
      maxWidth: 500,
      minHeight: 300,
      margin: "0 auto",
      padding: 30
    };

    return (
      <div className="backdrop" style={backdropStyle}>
       <div className="modal" style={modalStyle}>
         {this.props.children}

          <div className="footer">
            <button onClick= 
   {this.props.onRemove(this.props.index}>Delete</button>
            <button onClick={this.props.onClose}>Cancel</button>
          </div>
        </div>
      </div>
    );
  }
 }

export default Modal;

Answer 1

将每个待办事项的索引传递给toggleModal，并从删除函数中提取待办事项的索引。

remove = () =>
  this.setState({
    arrays: [
      ...this.state.arrays.slice(0, this.state.index),
      ...this.state.arrays.slice(this.state.index + 1)
    ],
    isOpen: false
});

toggleModal = (index) => {
  this.setState({
    isOpen: !this.state.isOpen,
    index: index
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="root"></div>

<script type="text/babel">

class Modal extends React.Component {
  render() {
    // Render nothing if the "show" prop is false
    if (!this.props.show) {
      return null;
    }

    // The gray background
    const backdropStyle = {
      position: "fixed",
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      backgroundColor: "rgba(0,0,0,0.3)",
      padding: 50
    };

    // The modal "window"
    const modalStyle = {
      backgroundColor: "#fff",
      borderRadius: 5,
      maxWidth: 500,
      minHeight: 300,
      margin: "0 auto",
      padding: 30
    };

    return (
      <div className="backdrop" style={backdropStyle}>
        <div className="modal" style={modalStyle}>
          {this.props.children}

          <div className="footer">
            <button onClick={() =>this.props.onRemove(this.props.index)}>Delete</button>
            <button onClick={this.props.onClose}>Cancel</button>
          </div>
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
      arrays: [{ name: 'Study'}, {name: 'Cook'}],
      index: null
    };
  }

  remove = () =>
    this.setState({
      arrays: [
        ...this.state.arrays.slice(0, this.state.index),
        ...this.state.arrays.slice(this.state.index + 1)
      ],
      isOpen: false
    });

  toggleModal = (index) => {
    this.setState({
      isOpen: !this.state.isOpen,
      index: index
    });
  };

  render() {
    return (
      <div className="App">

      <ul>
        {this.state.arrays.map((todo, index) => (
          <li key={index}>
            {todo.name}
            <i className="fa fa-times" onClick={() => this.toggleModal(index)}/>
          </li>
        ))}
      </ul>

      <Modal
        show={this.state.isOpen}
        index={this.state.index}
        onRemove={this.remove}
        onClose={this.toggleModal}
      />
      </div >
    );
  }
}

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