我正在评论部分,并使用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);
答案 0 :(得分:3)
只需将唯一的form
属性传递给表单组件即可。
您的redux-form
集成将更改为:
// No need to configure `form`, because it would be set dynamically via props
reduxForm({ validate })
用法:
<Form form={`commentbox_${uuid}`} />
答案 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
,那么在继续编写验证代码等之前,您会知道某些方法无法正常工作。