Как передать параметры на: нажмите в Svelte? - PullRequest
Новая
       15

Как передать параметры на: нажмите в Svelte?

2 голосов
/ 07 октября 2019

Привязать функцию к кнопке легко и просто: 

<button on:click={handleClick}>
    Clicks are handled by the handleClick function!
</button>

Но я не вижу способа передать параметры (аргументы) в функцию, когда я делаю это: 

<button on:click={handleClick("parameter1")}>
    Oh no!
</button>

Функция вызывается при загрузке страницы и никогда больше.

Можно ли вообще передать параметры в функцию, вызванную из on:click{}?

РЕДАКТИРОВАТЬ:

Я только что нашел хакерский способ сделать это. Вызов функции из встроенного обработчика работает. 

<button on:click={() => handleClick("parameter1")}>
    It works...
</button>

Ответы [ 3 ]

1 голос
/ 07 октября 2019

Нет четкого способа, упомянутого в документации, и ваше решение будет работать, но на самом деле оно не очень элегантно. Мое собственное предпочтительное решение - использовать curry в самом блоке script . 

const handleClick = (parameter) => () => {
   // actual function
}

И в HTML 

<button on:click={handleClick('parameter1')>
   It works...
</button>

Остерегайтесь карри

Как уже упоминалось в комментариях, карри имеет свои подводные камни. Наиболее распространенный вариант, который в приведенном выше примере handleClick('parameter1') не будет запускаться при нажатии, а скорее при рендеринге, возвращая функцию, которая, в свою очередь, будет запущена при нажатии. Это означает, что эта функция будет всегда использовать 'параметр1' в качестве аргумента.

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

Это приведет меня к другому моменту:

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

const handleParameter1Click = () => handleClick('parameter1');

2) Если значение является динамическим, но доступно внутри компонента, это все равно можно обработать с помощью отдельной функции: 

let parameter1;
const handleParameter1Click = () => handleClick(parameter1);

3) Если значение является динамическим, но недоступно для компонента, поскольку оно зависит откакая-то область видимости (например, список элементов, отображаемых в блоке #each), подход 'hacky' будет работать лучше. Однако я думаю, что в этом случае было бы лучше, если бы элементы списка сами были компонентом и вернулись к случаю № 2

В заключение: каррирование будет работать при определенных обстоятельствах, но не рекомендуется, если вы не оченьхорошо осведомлен и осторожен в том, как его использовать.

0 голосов
/ 02 ноября 2019

Рич ответил на это в комментарии, так что поверьте ему, но способ привязки параметров в обработчике кликов заключается в следующем: 

<a href="#" on:click|preventDefault={() => onDelete(projectId)}>delete</a>

function onDelete (id) {
  ...
}

Чтобы предоставить дополнительную информацию людям, которые также борются сэто, и это должно быть в документах, если это не так, вы также можете получить событие click в таком обработчике: 

<a href="#" on:click={event => onDelete(event)}>delete</a>

function onDelete (event) {
  // if it's a custom event you can get the properties passed to it:
  const customEventData = event.detail

  // if you want the element, you guessed it:
  const targetElement = event.target
  ...
}
0 голосов
/ 01 ноября 2019

Я получил это с этим работать: 

<a href="#" on:click|preventDefault={onDelete.bind(this, project_id)}>delete</a>

function onDelete(id) {
}
...