Redux形式的字段名称相同

时间:2018-10-23 10:04:13

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

我正在评论部分,并使用redux-form进行输入。我只有一个用于输入的字段组件。但是,当我在输入框中键入内容时,所有输入框都会填充相同的值。我知道这是因为所有这些输入框都具有相同的名称。但是我只想将值填充到选定的输入框。我该怎么做?

这是我的组件:

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);

3 个答案:

答案 0 :(得分:3)

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

您的redux-form集成将更改为

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

用法:

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

Credits

答案 1 :(得分:1)

您有很多评论表单,但是所有评论框都使用相同的表单(commentbox),这会引起问题。

您需要动态创建带有索引子修补程序的表单:

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

答案 2 :(得分:1)

这就是为什么我认为在使用诸如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()并提供我的arrow函数时。每当用户提交表单时,都会自动调用箭头功能。

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