我如何定位被點擊的 React 組件

Question

我想在單擊時更改組件的 class。我使用 state 創建一個具有 name 和 done 屬性的新組件（在創建時為 false）。然后將其推送到 todos 數組中。 現在的問題是如何找到單擊了哪個組件並將其“完成”屬性更改為？完成？

function App() {
    const [todos, setTodos] = useState([])
    const [newTodo, setNewTodo] = useState({
        name: "",
        done: false
    })

    const handleInput = (event) => {
        setNewTodo({name: event.target.value})
    }

    const handleDone = (event) => {

        //WHAT TO DO HERE

    }
    


    const submitTodo = (event) => {
        event.preventDefault();
        setTodos([...todos, newTodo.name])
        console.log(newTodo.name)
        setNewTodo({name: ""})
    }

  return (
    <div className="App">
        <form onSubmit={submitTodo}>
            <input onChange={handleInput} value={newTodo.name}/>
            <button>Add Todo!</button>
        </form>


        <ul>
            {todos.map(todo => (
                <li className={/*Change the class based on the DONE property*/} onClick={handleDone}>{todo}</li>
            ))}
        </ul>

    </div>
  );
}

export default App;

Answer 1

更改您的新Todo state

const [newTodo, setNewTodo] = useState('');
const [show,setShow] = useState(false);


const handleDone = (event) => setShow(!show)

.....
.....
.....

<li className={show ? 'classname when show is true': 'classname when show is false'} onClick={handleDone}>{todo}</li>

Answer 2

首先，您應該始終如一地讓您的待辦事項同時包含name和done屬性。 有了這個，您只需將點擊的<li>中的 todo 傳遞給您的點擊處理程序，以便它可以修改其 done 屬性並通過更新todos state 來導致重新渲染。

function App() {
    const [todos, setTodos] = useState([])
    const [newTodo, setNewTodo] = useState({
        name: "",
        done: false
    })

    const handleInput = (event) => {
        setNewTodo({name: event.target.value, done: false }); // this now adds done property
    }

    const handleDone = (todo) => {
        todo.done = !todo.done;
        setTodos([...todos]); // This sets new todos to cause a rerender with updated list
    }
    
    const submitTodo = (event) => {
        event.preventDefault();
        setTodos([...todos, newTodo]) // this now appends entire newTodo item not only it's name
        setNewTodo({name: "", done: false}) // this now also sets default done
    }

  return (
    <div className="App">
        <form onSubmit={submitTodo}>
            <input onChange={handleInput} value={newTodo.name}/>
            <button>Add Todo!</button>
        </form>

        <ul>
            {todos.map(todo => (
                <li
                    className={todo.done ? 'classA' : 'classB'}
                    onClick={() => handleDone(todo)}
                >
                    {todo.name} // this now displays todo.name not todo
                </li>
            ))}
        </ul>

    </div>
  );
}

export default App;

此外，您可以將待辦事項和點擊處理程序提取到單獨的組件中：

function ToDo({ item }) {
   const [clicked, setClicked] = useState(item.done);

   const handleClick = useCallback(() => {
       item.done = !clicked
       setClicked(!clicked);
   }, [clicked]);

   return <li
       className={clicked ? 'classA' : 'classB'}
       onClick={handleClick}
   >
       {item.name}
    </li>;
}

然后只需使用您的 App 組件呈現組件列表：

<ul>
    {todos.map(todo => <ToDo item={todo} />
</ul>