Блог

Я новичок в reactjs, я пытался разработать пользовательский интерфейс таким образом, чтобы при каждом щелчке на нем отображалось предупреждение о том, что этот элемент li нажат, но когда страница отображается, я вижу, что появляется много предупреждений. Может ли кто-нибудь указать на ошибку в моем коде и как ее избежать!

Вот фрагмент кода

index.html

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="utf-8" /gt;  lt;link rel="icon" href="%PUBLIC_URL%/favicon.ico" /gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1" /gt;  lt;!-- lt;meta name="theme-color" content="#000000" /gt; --gt;  lt;meta  name="description"  content="Web site created using create-react-app"  /gt;  lt;titlegt;Grade Scorelt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;div id="root"gt;lt;/divgt;  lt;/bodygt; lt;/htmlgt;  

index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals';  ReactDOM.render(  lt;React.StrictModegt;  lt;App /gt;  lt;/React.StrictModegt;,  document.getElementById('root') );   

App.js

 import './App.css';  function clickhandle (props) {  alert("you clicked on"   props.name) }  function Stud(props) {  return lt;li onClick={clickhandle(props)}gt; { props.name }lt;/ligt;;   }  function App() {  const students = ['Anil', 'Bob' , 'Clara', 'Dew', 'John', 'Ravi', 'Ram'];  return (  lt;gt;  lt;ulgt;  {students.map((student) =gt; lt;Stud name={student} /gt;)}  lt;/ulgt;  lt;/gt;  ); }  

Я хочу, чтобы предупреждения отображались только в том случае, если я нажму на элемент li, но в моем коде он постоянно всплывает, как только загружается страница!

Это потому, что вы вызываете функцию при загрузке страницы. Вы должны передать функцию onClick , а не вызывать функцию напрямую:

 onClick={() =gt; clickhandle(props)}