Reactjs onclick事件的三元条件_Reactjs

Reactjs onclick事件的三元条件

reactjs

Reactjs onclick事件的三元条件,reactjs,Reactjs,我正在尝试在React中创建一个待办应用程序。到目前为止，我的代码将待办事项添加到待办事项列表中。当我点击编辑图标时，我为“完成”图标设置了turnery条件，但它不起作用。有人能解释一下我的代码有什么问题吗 App.js import './App.css'; import React, { useState } from 'react'; import TodoList from './TodoList'; import { v4 as uuidv4 } from 'uuid'; func

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

App.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;

import'/App.css'；
从“React”导入React，{useState}；
从“/TodoList”导入TodoList；
从“uuid”导入{v4作为uuidv4}；
函数App（）{
//const[input，setInput]=useState（“”）；
const[todos，setTodo]=useState（[]）；
const input=React.useRef（）；
常量addTodo=（e）=>{
e、 预防默认值（）；
常量id=uuidv4（）；
setTodo（[…todo，{id:id，text:input.current.value}]）
input.current.value=''；
} 
常量deleteTodo=（id）=>{
setTodo（todos.filter（todo=>todo.id！==id））；
}
const editTodo=（id）=>{
}
报税表（
进入
);
}
导出默认应用程序；

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

从“React”导入React
从“@material ui/icons/Delete”导入DeleteIcon；
从“@material ui/icons/Edit”导入EditIcon；
从“@material ui/icons/CheckBoxOutlineBlank”导入CheckBoxOutlineBlank图标；
从“@material ui/icons/Done”导入DoneIcon；
const TodoItem=（{todo，deleteTodo，editTodo}）=>{
返回(
{  ?  :  }
)
}
将默认值导出到doItem

也许您正在寻找类似的产品

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

所以你首先必须有一个条件。在您的情况下，

EditIcon

不是一个条件

condition ? do something when true : do something when false

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

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

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

也许您正在寻找类似的事情

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

所以你首先必须有一个条件。在您的情况下，

EditIcon

不是一个条件

condition ? do something when true : do something when false

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

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

然后，您可以根据是否完成todo来决定。

您的代码存在一些问题。Abu Sufian还指出，三元运算符总是会触发紧跟在

？

之后的任何内容，因为

只是一个组件，并且总是正确的

但更重要的是，要想做你想做的事情，你需要在你的待办事项列表中正确地添加另一个，比如说，

status

。因此，当任务第一次进入时，它将处于

pending

状态，然后单击编辑图标后，它将变为

done

。这就是我们用三元运算符切换图标的方式

因此，我将您的

addTodo

函数更改为

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

然后我会将您的

editto

更改为：

  const editTodo = (id) => {
    console.log(id);
    setTodo(
      todos.map((todo) => {
        if (todo.id === id) todo.status = "done";

        return todo;
      })
    );
  };

最后，我将把你的三元部分改为：

{todo.status === "pending" ? (
          <EditIcon onClick={() => editTodo(todo.id)} />
        ) : (
          <DoneIcon />
        )}

{todo.status==“挂起”(
editTodo（todo.id）}/>
) : (
)}

这是给你的一份完整的报告。很抱歉，我没有你的CSS，所以我无法使它看起来非常漂亮。

你的代码有一些问题。Abu Sufian还指出，三元运算符总是会触发紧跟在

？