То же имя поля в сокращенной форме
Я работаю над разделом комментариев и использую сокращенную форму для ввода. У меня есть только один компонент 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);
@mbeso он включает одну и ту же форму несколько раз на одну страницу. У одного поста много комментариев.
о, понятно, вопрос был немного странным :)
Похоже, вы нашли ответ на свой вопрос, я бы порекомендовал, чтобы в будущем, спрашивая о состоянии в отношении reduxForm, вы включали свой файл reducers/index.js, чтобы мы могли увидеть, как вы настраиваете formReducer.
@ Дэниел, ладно, я буду иметь это в виду
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Просто передайте уникальную опору form вашему компоненту формы.
Ваша интеграция с redux-form изменится на:
// No need to configure `form`, because it would be set dynamically via props
reduxForm({ validate })
Использование:
<Form form = {`commentbox_${uuid}`} />
У вас много форм для комментариев, но все поля для комментариев используют одну и ту же форму (commentbox), это создает проблему.
Вам нужно динамически создать форму с подфиксом индекса:
const commentForm1 = reduxForm({ validate, form: "commentbox_1" })
const commentForm2 = reduxForm({ validate, form: "commentbox_2" })
На самом деле это тот же ответ, что и мой. Какой смысл публиковать один и тот же ответ дважды? :)
Я завершил свой ответ за 10 минут, когда я начинаю комментировать, я не вижу вашего ответа =))
@JordanEnev, как вы хорошо знаете, посты проходят аудит, поэтому я не буду об этом беспокоиться. Если что-то упущено, это будет рассмотрено.
Вот почему я считаю, что при работе со сложными библиотеками, такими как reduxForm, важно установить базовый вариант и заставить его работать. Я имею в виду, что сначала я бы реализовал простую форму, чтобы убедиться, что она работает, прежде чем перейти к написанию той тонны кода, которую вы написали, чтобы позже обнаружить, что что-то не работает должным образом.
Например, я бы начал с этого:
class FeedCommentsInput extends Component {
render() {
return (
<div>
<form onSubmit = {this.props.handleSubmit(values => console.info(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, добавленный в компонент Поле. Вот почему свойство name, требуемое компонентом Field, также может быть использовано, чтобы помочь вам. Если вы не видели feedTitle, вы бы знали, что что-то работает неправильно, прежде чем приступить к написанию кода для проверки и так далее.
Что вы имеете в виду под
all the input boxes get filled, я вижу здесь только одно текстовое поле