Передать данные по нажатию кнопки

148
15 ноября 2018, 20:30

Возник интересный вопрос, как мне лучше всего передавать someValue в somefunction,
при нажатии кнопки: оформить все это в форму или лучше использовать иной способ?

  <li key={someKeygen}>
    {someValue }
    <button onClick={this.somefunction.bind(this)}>Добавить</button>
  </li>
Answer 1

Вариант 1. Передавайте someValue в аттрибуте data:

<li key={someKeygen}>
    {someValue }
    <button 
        onClick={this.somefunction}
        data-some-value={someValue}
    >
        Добавить
    </button>
</li>

обработчик:

somefunction = (event) => {
    let someValue = event.target.datastore.someValue;
}

Вариант 2. Создайте отдельный компонент для элемента и передавайте ему someValue через props

class MyItem extends React.Component {
    render() {
        return (
            <button 
                onClick={this.onClick}
            >
                {this.props.children}
            </button>
        );
    }
    onClick = () => {
        this.props.onClick(this.props.value);
    }
}

список:

<li key={someKeygen}>
    <MyItem
        value={someValue}
        onClick={this.somefunction}
    >
        Добавить
    </MyItem>
</li>

обработчик:

somefunction = (value) => {
    let someValue = value;
}

Вариант 3. Указан в комментарии @Misha Saidov к вашему вопросу

READ ALSO
Slick slider с ползунком

Slick slider с ползунком

Подскажите решение как реализовать синхронизацию ползунка с картинкамиОчевидно, но на всякий случай: Крутим ползунок вправо - слайды двигаются...

150
Работа с скролом у блока

Работа с скролом у блока

Возникло несколько моментов с прокруткой блокаПрошу заметить, тут меня не интересует прокрутка страницы, как оказалось

142
Как сделать placeholder&#39;ы под картинки при их загрузке на странице

Как сделать placeholder'ы под картинки при их загрузке на странице

Такой стиль загрузки я заметил на сайте https://unsplashcom/(Наверное всем известен ) Помогите пожалуйста , буду ждать ответа

168
Плавное наведение JS

Плавное наведение JS

Есть галерея,при наведении на картинку должен появляться hover с текстом,должно это все выглядеть как ТУТ когда наводишь на картинку он очень...

175