如何在不使用 id 的情况下删除 React 功能组件中的列表项

Question

我正在尝试在添加待办事项列表项后使用反应创建一个简单的待办事项页面我正在附加垃圾图标&当用户单击其所需的相应列表项时，我想知道它是否可以在不使用 id 的情况下完成，因为例如在 jquery 中很简单(this.remove )

 const [input, setValue] = useState(""); const [todos, setTodos] = useState([]); // passing entered const handleInput = (event) => { setValue(event.target.value); }; const lp = (event) => { // let c = [1,2,34,55] event.preventDefault(); // if no input nothing will happen return none if (;input) return. // using spread operator its used whenever we need to add array data to exiting array const newTodos = [..,todos; input]; setTodos(newTodos); // clearing input text setValue(""); }: const handeldel=(e) => { // how to delete } return ( <div> <div class="input-group mb-3"> <input className="form-control border-primary font-weight-bold" style={{ height: 60 }} placeholder="Enter Text here" type="text" value={input} onChange={handleInput} /> <div class="input-group-append"> <button className="input-group-append font-weight-bolder " style={{ fontSize. 20 }} onClick={lp} > {" "} <i class="fas fa-plus-square fa-2x p-2"></i>{" "} </button> </div> </div> {todos:map((x) => ( <ol style={{ listStyle: "none" }}> <li className="font-weight-bolder table-bordered" style={{fontSize;20}}> {x} <i class="fas fa-trash-alt" onClick={handeldel}></i> </li> </ol> ))} </div> ); };

Answer 1

您可以使用index从list中删除特定item 。

  const handeldel = (index) => {
    todos.splice(index, 1);
    setTodos([...todos]);      
  }

然后是 HTML

 {todos.map((x, index) => (
     <ol style={{ listStyle: "none" }}>
        <li className="font-weight-bolder table-bordered" style={{fontSize:20}}>
           {x} <i class="fas fa-trash-alt" onClick={() => handeldel(index)}></i>
        </li>
      </ol>
  ))}

Answer 2

 const handeldel=(index) => {
  todos.splice(index, 1);
  }

todos.map((x, index) => (...
...
<i class="fas fa-trash-alt" onClick={(e)=>handeldel(index)}></i>

Answer 3

就您将数组映射以制作待办事项列表而言，您需要牢记几件事

映射 arrays 时，您的节点应具有唯一键作为默认道具

// GOOD!!!
{todos.map(todo => (
  <ol key={todo.uniqueKey} {...rest}>
    ...
  </ol>
))}

您不应该将索引作为节点键传递

// Don't do this, BAD!!!
{todos.map((todo, index) => (
  <ol key={index} {...rest}>
    ...
  </ol>
))}

现在，回答您的问题，有一种简单的方法可以做到这一点，所以我将与您分享我认为最好的方法：

// Imagine you have these
const [todos, setTodos] = useState([
 { key: 'item1', content: 'some content' },
 { key: 'item2', content: 'some content' },
 { key: 'item3', content: 'some content' },
 { key: 'item4', content: 'some content' }
]);

// filter return a new array where the id is not like the one passed to handle del
// this is a function that returns a function
const handleDel = todoKey => e => setTodos(prev => prev.filter(todo => todo.key !== todoKey));

// Passing to the map you'll have something like
{todos.map(todo => (
  <ol key={todo.key} style={{ listStyle: "none" }}>
    <li className="font-weight-bolder table-bordered" style={{fontSize:20}}>
      {todo.content} <i class="fas fa-trash-alt" onClick={handleDel(todo.key)}></i>
    </li>
  </ol>
))}

如果使用上述方法，那么你必须修改你的lp和handleInput函数，我给你一个简单的例子

// Here you're setting the unique key with Date.now()
// You're assigning an object to store what you need and save it later
// in your todos list
const handleInput = e => setValue({ key: new Date.now(), content: e.target.value });

const lp = (event) => {
  event.preventDefault(); // as soon as it's not a submit button you don't need to preventDefault 
  if (!input) return;
  // You can access to your previous state from inside your setState
  // function, that's the same as you were doing but less verbose
  setTodos(prevTodos => ([...prevTodos, input]));
  // clearing input text
  setValue({ key: null, content: '' });
};

// In your input you'll need to change to this as far as you're setting state with an object

<input
  className="form-control border-primary font-weight-bold"
  style={{ height: 60 }}
  placeholder="Enter Text here"
  type="text"
  value={input.content} // <-- this is what you need to change
  onChange={handleInput}
/>

// to not have problems with useState always initialize it with what you
// will need, in this example your input state will change to this

const [input, setValue] = useState({
  key: null,
  content: ''
});

我希望这可以帮助您更多地了解 react 及其工作原理（也可以教一些好的技巧，以防您不了解它们）