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 prop傳遞給Form組件即可。

您的redux-form集成將更改為 ：

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

用法：

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

積分 。

Answer 2

你有很多意見的形式，但采用相同的形式（所有評論框commentbox ），這使問題。

您需要動態創建帶有索引子代碼的表單：

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

Answer 3

這就是為什么我相信在使用像reduxForm這樣的復雜庫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的全部流程， reduxForm我首先建立的是確保一切正常運行。

當我在表單上添加onSubmit處理程序，然后在那里調用handleSubmit()並提供我的箭頭函數。 只要用戶提交表單，就會自動調用箭頭函數。

控制台日志中的值對象是輸入到輸入中的文本，對象的鍵是添加到Field組件的name 。 這就是為什么Field組件所需的name屬性也可以用來幫助您。 如果您沒有看到feedTitle那么在繼續編寫驗證代碼之前，您會知道某些內容無法正常工作，等等。