Как передать переменную при вызове функции?

#javascript #reactjs

Вопрос:

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

 const App = () => {
    const handleOnClickFirst = () => {
      setValue('first')
    }
    const handleOnClickSecond = () => {
      setValue('second')
    }

    return (
        <div>
            {anything === true
            ? <Button onClick={handleOnClickFirst} />
            : <Button onClick={handleOnClickSecond} />}
        </div>
    )
}

Таким образом, должно быть просто только

 const handleOnClick = (value) => {
    setValue(value)
}

Но как мне передать значение в onClick ?

Ответ №1:

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

 onClick={(event) => handleOnClick(value)}

или для старых версий мы можем сделать

 onClick={function(event){ handleOnClick(value) }}

Если вам не нужны события, вы можете просто передать это следующим образом

 onClick={() => handleOnClick(value)}

Также, если это базовый компонент класса, мы используем bind для передачи контекста метода и аргументов

 class App extends React.Component {
  handleOnClick(val) {
    console.log(`${val}`);
  }
  render() {
    return (
      <button onClick={this.handleOnClick.bind(this, "test")}>
        click me
      </button>
    );
  }
}

1. Итак, onclick={handleOnClick} и onClick={() => handleOnClick()} совпадают, если параметр не нужен?

2. bind в данном контексте это больше не актуально, и функции со стрелками можно использовать как для метода класса, так и для встроенных обратных вызовов.

3. @user3142695 это то же самое, если handleOnClick не принимает параметра.

Ответ №2:

Вы могли бы сделать

  onClick={() => handleOnClick(value)}

Редактировать:

Дополнительная информация здесь: https://reactjs.org/docs/faq-functions.html

Ответ №3:

Вы можете сделать это :

 <button onClick={(event)=>handleOnClick(<pass your paramter here>)}></button>

Ответ №4:

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

 const App = () => {
     const handleOnClick = (passedInValue) => {
          setValue(passedInValue)
     }
     return (
          <div>
               {anything === true
               ? <Button onClick={() => handleOnClick("first")} />
               : <Button onClick={() => handleOnClick("second")} />}
          </div>
      )
    }