在单击 Reactjs 中的按钮之前渲染组件答案

【问题标题】：Component is rendered before clicking on button in Reactjs在单击 Reactjs 中的按钮之前渲染组件
【发布时间】：2021-04-19 14:59:19
【问题描述】：

我是 Reactjs 的新手。我正在使用它制作一个待办事项应用程序。所以在开发阶段我希望删除按钮到console.log（）“你好”onClick。但是每当我提交一个新的 todo 任务时，即使没有单击删除按钮，它也会在 console.log() 中显示“hello”，如果然后我单击删除按钮，控制台上什么也不会发生。我不明白问题出在哪里。我上网了，但没有任何效果。

谁能告诉我问题出在哪里？

这是我的代码：

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>
    </>
);
}

谢谢你，

真心的

Rishabh Raghwendra

【问题讨论】：

你应该传递一个函数给onClick，它应该是() => console.log('hello')
如果你这样写，console.log('hello') 会在组件渲染（重新渲染）时自动执行。您应该向其传递一个函数：() => console.log('hello')
@nmDat 。非常感谢兄弟..???‍♀️

标签： javascript reactjs bootstrap-4 react-bootstrap

【解决方案1】：

您在渲染时立即调用该函数。你应该只传递一个点击执行的函数

给你，这应该可以解决你的代码问题，

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

【讨论】：