在 Reactjs 中單擊按鈕之前呈現組件

Question

我是 Reactjs 的新手。我正在使用它制作一個待辦事項應用程序。 所以在開發階段，我希望刪除按鈕到 console.log() “hello” onClick。但是每當我提交一個新的待辦任務時，即使沒有單擊刪除按鈕它 console.log() “hello” 如果然后我單擊刪除按鈕在控制台上沒有任何反應。 我不明白問題出在哪里。 我瀏覽了 inte.net，但沒有任何效果。

誰能告訴我問題出在哪里？

這是我的代碼：

import './styles/App.css';
import { useState } from 'react';
import { Form, Button, ListGroup } from 'react-bootstrap';
import DropDown from './components/DropDowns';
import DeleteButton from './components/DeleteButton';
function App() {
  const [todoList, setTodo] = useState([]);
  const [Ttitle, setTitle] = useState('');
  const [desc, setDesc] = useState('No Description');
  return (
    <div className="App d-flex flex-column">
      <h1 className="mt-3">Your ToDo App</h1>
      <div className="container-fluid mx-0 px-0">
        <div className="Todo__Res mx-5">
          <h2>Your ToDo List</h2>
          <div className="List">
            <ul className="Todo__List">
              {todoList ? todoList.map((item, index) => <li key={index}>
                <ListGroup>
                  <ListGroup.Item>{item.title}<DropDown desc={item.desc} /><DeleteButton index={index}/></ListGroup.Item>
                </ListGroup>
              </li>) : 0}
            </ul>
          </div>
        </div>
        <div className="Todo__Add mx-5">
          <h2>Add Your ToDo</h2>
          <Form>
            <Form.Group controlId="exampleForm.ControlInput1">
              <Form.Label>Title</Form.Label>
              <Form.Control type="text" placeholder="Take Jack to School..." onChange={e => setTitle(e.target.value)} />
            </Form.Group>
            <Form.Group controlId="exampleForm.ControlTextarea1">
              <Form.Label>Description</Form.Label>
              <Form.Control as="textarea" rows={3} placeholder="Buy him a cake..." onChange={e => setDesc(e.target.value)} onDefault={desc} />
            </Form.Group>
            <Button variant="primary" type="submit" onClick={(e) => {
              e.preventDefault();
              const kk = {
                title: Ttitle,
                desc: desc
              }
              setTodo([...todoList, kk]);
            }}>
              Submit
            </Button>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default App;

//Delete Button Component :
import {Button}from 'react-bootstrap'
export default function DeleteButton({index}){
return(
    <>
    <Button variant="outline-danger" onClick={console.log("hello")}>Delete</Button>
    </>
);
}

感謝您，

敬上

里沙布·拉格溫德拉

Answer 1

您在渲染時立即調用 function。 您應該只傳遞一個 function 以在單擊時執行

給你 go，這應該可以解決你的代碼問題，

<Button variant="outline-danger" onClick={() => console.log("hello")}>Delete</Button>