Реагируйте: функция Button onClick работает при загрузке страницы, но вы не нажимаете ее - PullRequest
Новая
       25

Реагируйте: функция Button onClick работает при загрузке страницы, но вы не нажимаете ее

0 голосов
/ 11 января 2019

Я использую ButtonGroup и Button из ReactStrap. Я установил функцию onClick при нажатии одной из кнопок: 

< ButtonGroup >
  <Button>Edit</Button>
  <Button onClick={console.log("Print some text")}>Print text</Button>
  <Button>Set as default</Button>
</ButtonGroup >

Но когда я загружаю страницу, вот что я получаю: enter image description here

Еще до того, как я нажал кнопку. И если я нажму на нее, в консоли ничего не появится. Есть идеи?

Ответы [ 3 ]

0 голосов
/ 11 января 2019

Чтобы было понятнее

Для любого триггера события (onClick, onChange и т. Д.) Вы должны указать функцию для вызова при возникновении события не вызов функции сразу

Рассмотрим эту функцию

ES5: 

function callMe() {
  console.log("Some text");
}

ES6: 

const callMe = () => {
  console.log("Some text");
}

если вы хотите вызвать эту функцию при нажатии кнопки, вы не можете сделать это 

<Button onClick={callMe()}>Print text</Button>

Это вызовет fuction callMe, когда кнопка будет загружена один раз. То, что вам нужно сделать, чтобы это работало, это 

<Button onClick={callMe}>Print text</Button>

Обратите внимание, что после имени функции нет скобок, указывающих на то, что функция еще не вызвана.

0 голосов
/ 12 января 2019

Параметр onClick оценивается как обратный вызов, поэтому, если вы передаете что-то, что не является функцией, вычисляется и выполняется во время выполнения.

Вместо этого вы должны передать функцию в параметр onClick: 

  <Button onClick={() => { console.log("Print some text"); }}>Print text</Button>

Будьте осторожны со встроенными функциями, потому что они оцениваются при каждом выполнении рендеринга, что может быть несколько раз, каждая функция занимает больше памяти, используемой браузером.

Если у вас есть класс, вы можете использовать метод жирной стрелки: 

/* ... */
handleOnClick = () => {
  console.log("Print some text");
}

render() {
  return (
    <ButtonGroup>
      <Button>Edit</Button>
      <Button onClick={this.handleOnClick}>Print text</Button>
      <Button>Set as default</Button>
    </ButtonGroup >
  );
}
/* ... */
0 голосов
/ 11 января 2019

Onclick должен быть функционален. Вы просто установили onlick как результат console.log("Print some text")

Попробуйте это 

   <Button onClick={() => {console.log("Print some text")}}>Print text</Button>
...