时间戳

首页 > 解决方案 > onclick 事件的三元条件

reactjs - onclick 事件的三元条件

问题描述

我正在尝试在 React 中创建一个待办事项应用程序。到目前为止，我的代码将待办事项添加到待办事项列表中。当我单击编辑图标时，我已经为完成图标设置了转动条件，但它不起作用。有人可以解释我的代码有什么问题吗？

应用程序.js

import './App.css';
import React, { useState } from 'react';
import TodoList from './TodoList';
import { v4 as uuidv4 } from 'uuid';

function App() {
  // const [input, setInput] = useState('');
  const [todos, setTodo] = useState([]);
  const input = React.useRef();

  const addTodo = (e) => {
    e.preventDefault();
    const id = uuidv4();
    setTodo([...todos, { id: id, text: input.current.value }]) 
    input.current.value='';
  } 

  const deleteTodo = (id) => {
    setTodo(todos.filter(todo => todo.id !== id));
  }

  const editTodo = (id) => {
    
  }

  return ( 
    <div className="App">
      <form>
        <input type="text" ref={input}/>
        <button type="submit" onClick={addTodo}>Enter</button>
      </form>
      <TodoList todos={todos} deleteTodo={deleteTodo} editTodo={editTodo}/>
    </div>
  );
}

export default App;

TodoItem.js

import React from 'react'
import DeleteIcon from '@material-ui/icons/Delete';
import EditIcon from '@material-ui/icons/Edit';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import DoneIcon from '@material-ui/icons/Done';

const TodoItem = ({todo, deleteTodo, editTodo}) => {
    return (
        <>
            <div>
                <CheckBoxOutlineBlankIcon/>
                <input type="text" value={todo.text} readOnly={true}/>
            </div>
            <div>
               { <EditIcon/> ? <EditIcon onClick={editTodo}/> : <DoneIcon/> }
               <DeleteIcon onClick={deleteTodo}/>
            </div>
        </>
    )
}

export default TodoItem

标签： reactjs

解决方案

也许你正在寻找这样的东西。

{ !todo.done ? <EditIcon onClick={editTodo}/> : <DoneIcon/> }

我相信检查待办事项是否完成应该与todo对象本身的属性一起发生。

在三元组中，您需要从一个条件开始。

condition ? do something when true : do something when false

所以你必须首先有一个条件。在你的情况下EditIcon不是一个条件。

如果您正在寻找一种将待办事项标记为已完成的方法，那么您需要做更多的事情。

const markAsCompleted = id => {
  const todo = todos.find(todo => todo.id !== id);
  setTodo([...todos, {...todo, done: true }]);
}

然后您可以根据待办事项是否完成来决定。

推荐阅读