То же имя поля в редуксе

Question

Я работаю над разделом комментариев и использую избыточную форму для ввода информации.У меня есть только один компонент поля для ввода данных.Но когда я печатаю в поле ввода, все поля ввода заполняются одним и тем же значением.Я знаю, что это потому, что все эти поля ввода имеют одинаковое имя.Но я только хочу заполнить значение для выбранного поля ввода.Как мне это сделать?

Вот мой компонент:

import { compose } from "redux";
import { connect } from "react-redux";
import React, { Component } from "react";
import { Field, reduxForm } from "redux-form";

import { addComment, fetchPosts } from "../../../actions/FeedPost";
import "./FeedCommentsInput.css";
import TextareaAutosize from "react-textarea-autosize";

class FeedCommentsInput extends Component {
  renderField = field => {
    const { touched, error } = field.meta;
    const className = `comment-input-box ${
      touched && error ? "red-border__error-comment" : ""
    }`;
    return (
      <TextareaAutosize
        {...field.input}
        placeholder={field.placeholder}
        type={field.type}
        className={className}
      />
    );
  };

  onSubmit = formProps => {
    const { postid } = this.props;
    this.props.addComment(formProps, postid);
  };

  render() {
    const { handleSubmit } = this.props;

    return (
      <div>
        <form onSubmit={handleSubmit(this.onSubmit)}>
          <Field
            name="text"
            component={this.renderField}
            type="text"
            placeholder="Enter your Comment"
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

const validate = values => {
  const errors = {};

  if (!values.comment) errors.comment = "Please Enter Something";

  return errors;
};

export default compose(
  connect(
    null,
    { addComment, fetchPosts }
  ),
  reduxForm({ validate, form: "commentbox" })
)(FeedCommentsInput);

Answer 1

У вас есть много форм комментариев, но все поля комментариев используют одну и ту же форму (commentbox), это создает проблему.

Вам необходимо динамически создать форму с подфиксом индекса:

const commentForm1 = reduxForm({ validate, form: "commentbox_1" })
const commentForm2 = reduxForm({ validate, form: "commentbox_2" })

Answer 2

Вот почему я считаю, что при работе со сложными библиотеками, такими как reduxForm, важно установить базовый вариант и заставить его работать.Я имею в виду, что сначала мне нужно реализовать простую форму, убедиться, что она работает до того, как написать тонну кода, который вы написали, чтобы потом выяснить, что что-то не работает должным образом.

Например, я бы начал сэто:

class FeedCommentsInput extends Component {
  render() {
    return ( 
    <div>
       <form onSubmit={this.props.handleSubmit(values => console.log(values))}>
           <Field type=“text” name=“feedTitle” component=“input” />
        <button type=“submit”>Submit</button>
       </form>
    </div>
    );
  }
}

export default reduxForm({ form: 'FeedCommentsInput' })(FeedCommentsInput);

Никаких проверок, ничего больше, только эти простые инструкции установки, импорта и экспорта включены, конечно.Теперь с этой настройкой, когда пользователь отправляет форму, будет вызвана функция, переданная нам с помощью формы избыточного числа, и она будет внутренне вызывать функцию, которую я передала внутри onSubmit.

Затем я перейду в браузер ипротестируйте его, добавив текст и нажав «Отправить», и когда я это сделаю, я должен увидеть консольный журнал с ключом feedTitle и значением набранного текста.

Это почти весь потоко reduxForm в двух словах, и это то, что я бы сначала установил, чтобы убедиться, что все работает.

Когда я добавляю обработчик onSubmit к форме, а затем вызываю handleSubmit() внутри и выдаюмоя функция стрелка.Функция стрелки будет вызываться автоматически всякий раз, когда пользователь отправляет форму.

Объект значений в журнале консоли - это текст, который был введен во ввод, а ключ объекта - name, добавленный кПолевой компонент.Вот почему свойство name, требуемое компонентом Field, также может быть использовано, чтобы помочь вам.Если вы не видели feedTitle, вы бы знали, что что-то не работает должным образом, прежде чем писать код для проверок и т. Д.

Answer 3

Просто передайте уникальную form опору вашему компоненту формы.

Ваша интеграция redux-form изменится на :

// No need to configure `form`, because it would be set dynamically via props
reduxForm({ validate })

Использование:

<Form form={`commentbox_${uuid}`} />

Кредиты .