0

Я обучаюсь сейчас redux. Задача стоит в том, чтобы переписать виджет комментариев с одного react на redux. Вроде все получается, но не могу понять, как передать значение inputa в свойство name.

//action creators
export const addComment = (name) => {
  return {
    type: ADD_COMMENT,
    id: nextCommentId++,
    name
  }
}

export const removeComment = (id) => {
  return {
    type: REMOVE_COMMENT,
    id
  }
}

Функция reducer

const comments = (state = [], action) => {
  switch (action.type) {
    case ADD_COMMENT:
      return [
      ...state,
      {
        name: action.name,
        id: action.id
      }
    ]
    case REMOVE_COMMENT:
      return state.filter((comment, id) => id !== action.id);

    default:
      return state
  }
}

export default comments;

Это файл добавления комментария

import React, { Component } from 'react';
import { addComment } from '../actions/index.js'

const AddComment = ({ addComment,name }) => {

  return (
    <div>
      <form>
        <label htmlFor="username">Введите ваше имя:</label> <br />
        <input
        type="text"
        id="username"
        onChange={ev => {
           name: ev.target.value
        }}
        /> <br /><br />

        <label htmlFor="usercomment">Введите ваш комментарий:</label> <br />
        <textarea
          id="usercomment"
          rows="10"
          cols="40"
        ></textarea> <br />
      </form>
        <button
          className="btn"
          onClick={ev => {
            addComment(name);
          }}
        >
          Добавить комментарий
        </button>
    </div>
  )
}

export default AddComment;

Файл со списком комментариев

import React from 'react';
import { removeComment }  from '../actions/index';

const CommentList = ({ comments, removeComment, name }) => {

  return (
        <ul>
          {
            comments.map((comment, index) => {
              return (
                <li key={index}>
                  <b>
                  {comment.name + ' ('  + ')'}
                  </b> <button
                  className="btn-remove"
                  onClick={ev => {
                    removeComment(index)
                  }}
                  >
                  Удалить комментарий
                  </button><br />

                  </li>
                )

              })
            }
          </ul>
  )
}

export default CommentList;

файл app.js

import React from 'react';
import { connect } from 'react-redux';

import CommentList from '../components/comment-list';
import AddComment from '../components/add-comments';

import { addComment,removeComment } from '../actions/index';

let App = ({ comments, addComment, removeComment }) => {

  return (
    <div>
      <CommentList comments={comments} removeComment={removeComment} />
      <AddComment addComment={addComment}/>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    comments: state
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addComment: (name) => dispatch(addComment(name)),
    removeComment: (id) => dispatch(removeComment(id))
  }
}



App = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

export default App;

Задача стоит в том, чтобы передать имя, текст коммента и дату. Но для начала хочу сделать, чтобы хотяб добавлялось имя.

1 ответ 1

0

Нужно сохранять значение ипута в стейт и затем задиспатчить событие. Как-то так:

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { addComment } from '../actions/index.js'

const AddComment = ({ addComment }) => {
  const [name, setName] = useState('');

  return (
    <div>
      <form>
        <label htmlFor="username">Введите ваше имя:</label> <br />
        <input
          type="text"
          id="username"
          value={name}
          onChange={ev => {
            setName(ev.target.value)
          }}
        /> <br /><br />

        <label htmlFor="usercomment">Введите ваш комментарий:</label> <br />
        <textarea
          id="usercomment"
          rows="10"
          cols="40"
        ></textarea> <br />
      </form>
      <button
        className="btn"
        onClick={ev => {
          addComment(name);
        }}
      >
        Добавить комментарий
      </button>
    </div>
  )
}

const mapDispatchToProps = {
  addComment,
}


export default connect(null, mapDispatchToProps)(AddComment)

Обратите внимание, мы оборачиваем AddComment в connect для того чтоб связать компонент с редаксом и давать редаксу знать о событии от компонента.

1
  • Спасибо, заработал 3 окт 2019 в 6:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.