從陣列中刪除所選項目

Question

我有一個簡單的表單，我想在其中單擊“刪除”按鈕時刪除所選的項目。 我正在部分刪除所需的項目，但是如果我刪除中間的項目，它也會刪除最后一個項目。 如果刪除第一項，它將刪除整個數組。

這里的例子

代碼在這里：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

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

    this.state = {
      data: ["Saab", "Volvo", "BMW"],
      editMode: false,
      rulesTerm: ""
    };
  }

    handleInput = e => {
    let value = e.target.value;
    let name = e.target.name;
    console.log(name);
    console.log(value);

    this.setState(prevState => ({
      data: {
        ...prevState.data,
        [name]: value
      }
    }));
  };

  handleFormSubmit = e => {
    e.preventDefault();

    const { data } = this.state;
    console.log(data);
  };

  removeRule = (e, index) => {
    e.preventDefault();

    const { data } = this.state;
    console.log("removed", data.splice(index));

    this.setState({
      data: data,
      rulesTerm: ""
    });
  };

  render() {
     return (
       <div className="App">
        <div>
          {!this.state.editMode ? (
            <button onClick={() => this.setState({ editMode: true })}>
              edit
            </button>
          ) : (
            <div>
              <button onClick={() => this.setState({ editMode: false })}>
                cancel
               </button>
              <button onClick={this.handleFormSubmit}>submit</button>
            </div>
           )}
        </div>

        <React.Fragment>
          {this.state.data.map((rule, index) =>
            this.state.editMode ? (
              <form onSubmit={this.handleFormSubmit}>
                <React.Fragment>
                  <input
                    onChange={this.handleInput}
                    type="text"
                    placeholder="Cars"
                    name={rule}
                    defaultValue={rule}
                    key={index}
                  />
                  <button onClick={event => this.removeRule(event, index)}>
                    Remover
                  </button>
                </React.Fragment>
              </form>
            ) : (
              <p key={rule}> - {rule} </p>
            )
          )}
        </React.Fragment>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

有什么幫助嗎？ 謝謝！

Answer 1

使用splice ，您需要傳遞要刪除的元素數量。

如果省略deleteCount，或者其值等於或大於array.length-開始（即，如果等於或大於數組中剩余的元素數量，則從start開始），則所有從數組開始到結尾的所有元素都將被刪除。

Answer 2

一種解決方案是將刪除函數轉換為咖喱函數，該函數將在調用一次后首先接收index ，然后再接收事件。

您可以使用setState的回調版本過濾出元素，並過濾出具有相同索引的元素：

removeRule = index => event => {
    this.setState(prev => ({
        data: prev.data.filter((el, i) => i !== index),
        rulesTerm: ""
    }));
};

您還可以指示您的splice方法只需要刪除一個元素即可：

removeRule = index => event => {
    this.setState(prev => ({
        data: prev.data.splice(index, 1),
        rulesTerm: ""
    }));
};

現在，您在JSX中的函數綁定如下所示：

<button onClick={this.removeRule(index)}>
    Remover
</button>

Answer 3

在您的情況下，我將使用過濾器，並將規則作為參數傳遞：

 <React.Fragment>
          {this.state.data.map((rule, index) =>
            this.state.editMode ? (
              <form onSubmit={this.handleFormSubmit}>
                <React.Fragment>
                  <input
                    onChange={this.handleInput}
                    type="text"
                    placeholder="Cars"
                    name={rule}
                    defaultValue={rule}
                    key={index}
                  />
                  <button onClick={event => this.removeRule(event, rule)}>
                    Remover
                  </button>
                </React.Fragment>
              </form>
            ) : (
              <p key={rule}> - {rule} </p>
            )
          )}
        </React.Fragment>

比您的removeRule函數中：

removeRule = (e, rule) => {
    e.preventDefault();

    const { data } = this.state;
    const newData = data.filter(item => item !== rule);
    console.log("removed");

    this.setState({
      data: newData,
      rulesTerm: ""
    });
  };