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