Как я могу ссылаться на элемент DOM в функции, которая выполняет вызов действия?

Question

У меня есть функциональный компонент, в котором я хотел бы использовать onClick для отправки действия для простой кнопки «Мне нравится».В функции onClick для получения свойств хранилища элемента DOM, на который он ссылается, обновляется фрагмент хранилища, на который он рассчитан.

Я пытался передать данные как реквизиты, чтобыпомогло.Я также попытался использовать Ref Ref, но это, кажется, зарезервировано для компонентов класса

Компонент, который обрабатывает щелчок

Нравится и содержание передается внизиз магазина Redux через реквизиты из родительского компонента

import React from 'react';
import styles from '../scss/styles.scss';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {onNewLike} from './../actions';

function Post(props){


  function doALike() {
    const { dispatch } = props
    dispatch(onNewLike())
  }

    return(
      <div className="post">
        <h1>{props.content}</h1>
        <div className="post-statistics">
          <p onClick={doALike}>LIKE</p>
          <p>likes: {props.likes}</p>
        </div>
      </div>
    );
  }

Post.propTypes = {
  content: PropTypes.string,
  likes: PropTypes.number,
  dispatch: PropTypes.func
}


export default connect()(Post)

Редуктор, которому я пытаюсь передать пост, чтобы я мог обновлять лайки каждого уникального поста (не написал логику дляеще не обработал подобное - просто хочу убедиться, что я получаю лайки каждого поста

import { initialState } from '../constants/initialState';
import c from './../constants';

export function likeReducer(state = initialState, action){
  switch (action.type){
  case c.NEW_LIKE:
    console.log(action.id)
  default:
    return state;
  }
}

Компонент, который позволяет пользователям генерировать новый пост и передает «лайки», установленным в«0» в магазин редуксов

import React from 'react';
import styles from '../scss/styles.scss';
import PropTypes from 'prop-types';
import { v4 } from 'uuid';
import {connect} from 'react-redux';
import {onNewPost} from './../actions';


function NewPost({dispatch}){


    let _content = null;

    function handleNewPost(e){
      e.preventDefault();
      let post = {content: _content.value, likes: 69, id: v4()}
      dispatch(onNewPost(post))
    }

  return(
    <div className='newPost'>
      <h1>Create a Post</h1>
      <form onSubmit={handleNewPost}>
        <input type='text'
          id='content'
          className='newPostInput'
          placeholder='Whats on your mind?'
          ref={(input) => {_content = input;}}/>
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
}

Answer 1

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

function Post(props){
    function doALike(whateverProps) {
        dispatch(onNewLike())
      }

        return(
          <div className="post">
            <h1>{props.content}</h1>
            <div className="post-statistics">
              <p onClick={() => {doALike(props)}}>LIKE</p>
              <p>likes: {props.likes}</p>
            </div>
          </div>
        );
      }