javascript - redux-form 中的同名字段

Question

我正在处理评论部分并使用 redux-form 来获取输入。我只有一个 Field 组件用于接收输入。但是当我在输入框中键入时，所有输入框都会填充相同的值。我知道这是因为所有这些输入框都具有相同的名称。但是我只想将值填充到选中的输入框。我该怎么做？

这是我的组件:

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

只需将唯一的 form 属性传递给您的 Form 组件。

您的 redux-form 集成将更改为:

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

用法:

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

Credits .