redux-form 中的同名字段答案

【问题标题】：Same name of field in redux-formredux-form 中的同名字段
【发布时间】：2019-03-27 12:45:16
【问题描述】：

我正在处理评论部分并使用 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);

【问题讨论】：

all the input boxes get filled是什么意思，我这里只能看到一个文本框
@mbeso 他在同一页面上多次包含同一个表单。一篇文章有很多cmets。
哦，我明白了，问题有点奇怪:)
看起来您找到了问题的答案，我建议您以后在询问有关reduxForm 的状态时，包括您的reducers/index.js 文件，以便我们可以看到您是如何设置的向上formReducer.
@Daniel，好的，我会记住这一点

标签： javascript reactjs redux react-redux redux-form

【解决方案1】：

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

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

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

用法：

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

Credits.

【讨论】：

【解决方案2】：

您有许多 cmets 表单，但所有 cmets 框都使用相同的表单 (commentbox)，这会产生问题。

您需要动态创建一个带有索引子前缀的表单：

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

【讨论】：

其实这和我的答案是一样的。两次发布相同的答案有什么意义？ :)
我在 10 分钟内完成了我的回答，当我开始评论时，我没有看到你的回答 = ))
@JordanEnev，众所周知，帖子会经过审核，所以我不会担心。如果有什么疏忽，它会得到解决。

【解决方案3】：

这就是为什么我认为在使用像 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);

没有验证，没有别的，只是这个简单的设置，当然包括导入和导出语句。现在通过这个设置，当用户提交表单时，redux 表单传递给我们的函数将被调用，它会在内部调用我在 onSubmit 中传递的函数。

然后我会转到浏览器并通过添加一些文本并单击提交来测试它，当我这样做时，我应该会看到一个控制台日志，其中包含 feedTitle 的键和我输入的文本的值。

简而言之，这几乎是reduxForm 的全部流程，我会首先建立它以确保一切正常。

当我将onSubmit 处理程序添加到表单中，然后在其中调用handleSubmit() 并提供我的箭头函数。只要用户提交表单，就会自动调用箭头函数。

控制台日志中的值对象是输入到输入中的文本，对象的键是添加到字段组件的name。这就是为什么Field 组件所需的name 属性也可以用来帮助您的原因。如果您没有看到feedTitle，那么在您继续编写验证代码等之前，您就会知道有些东西无法正常工作。

【讨论】：