Mam prostą aplikację todo, w której mój sklep redux zawiera tablicę "todos". Mój komponent "Todo" mapuje każde "todo" w sklepie i renderuje komponent "TodoForm", który używa formularzy redux v6.Jak utworzyć wiele formularzy na tej samej stronie za pomocą formularzy redux v6?
Tak jak obecnie, każde "todo" ma tę samą nazwę/klucz formularza, więc za każdym razem, gdy wprowadzam coś w polu "tytuł", zmienia on "tytuł" każdego todo. Znalazłem pracę, używając unikatowych nazw pól, ale obawiam się, że będzie to nadmierne komplikowanie rzeczy w miarę wzrostu aplikacji i wolałbym używać unikalnych nazw Form, więc każde pole może mieć tę samą nazwę bez przeszkadzania innym formom.
(TodoForm1, TodoForm2, TodoForm3 mogą mieć unikatowe pole "tytuł" zamiast TodoForm zawierające "title1", "title2", "title3" Fields).
Próbowałem uzyskać dostęp do rekwizytów TodoForm, więc mogłem ustawić klucz każdej z nich jako unikalny identyfikator komponentu, ale nie wygląda na to, że komponent wcześnie otrzymuje rekwizyty.
Próbowałem również wykonać natychmiast wywoływaną funkcję, w której wypluwa liczbę losową, i używając tego numeru jako nazwy formularza, ale to też nie zadziałało.
Jak mogę przeglądać wszystkie moje todos i renderować formularz redux v6 za pomocą unikalnego klucza formularza?
Oto zdjęcie devtools aplikacji, konsoli i redux. Jest 3 „todos”, ale jest tylko jeden formularz, który je wszystkie łączy, todo-926, choć każdy klawisz forma powinna być generowane losowo w natychmiast wywołał funkcję:
HomePageMainSection.index.js
renderTodos(todo) {
if (!todo) {
return <div>No Todos</div>;
}
return (
<div key={todo.get('id')}>
<Todo
todo={todo}
updateTodo={this.props.updateTodo}
deleteTodo={this.props.deleteTodo}
/>
</div>
);
}
render() {
if (!this.props.todos) {
return <div>No Todos</div>;
}
return (
<div className={styles.homePageMainSection}>
<h1>Hey I'm the Main Section</h1>
<div>
{this.props.todos.get('todos').map(this.renderTodos)}
</div>
</div>
);
}
Todo.index.js:
renderTodo() {
if (this.state.editMode) {
return (
<TodoForm
todo={this.props.todo} changeTodoEditMode={this.changeTodoEditMode}
updateTodo={this.props.updateTodo}
/>
);
}
return (
<div className={styles.Todo} onClick={this.changeTodoEditMode}>
<div className="card card-block">
<h4 className="card-title">{this.props.todo.get('author')}</h4>
<p className="card-text">{this.props.todo.get('title')}</p>
<i
className={`${styles.deleteIcon} btn btn-danger fa fa-times`}
onClick={this.deleteTodo}
></i>
</div>
</div>
);
}
render() {
return (
<div className="col-xs-6 col-sm-4">
{this.renderTodo()}
</div>
);
}
TodoForm.index.js:
class TodoForm extends React.Component { // eslint-disable-line react/prefer-stateless-function
constructor(props) {
super(props);
this._handleSubmit = this._handleSubmit.bind(this);
}
_handleSubmit(formData) {
console.log('');
console.log('OG: ', this.props.todo)
console.log('formData: ', formData);
const data = this.props.todo.update('title', formData.get('title'));
console.log('data: ', data);
console.log('');
// this.props.updateTodo(data);
}
render() {
const { handleSubmit, pristine, submitting } = this.props;
return (
<form className={`${styles.todoForm} card`} onSubmit={handleSubmit(this._handleSubmit)}>
<div className="card-block">
<label htmlFor="title">{this.props.todo.get('title')}</label>
<div className={'form-group'}>
<Field name={`title`} component="input" type="text" placeholder="Enter new title" className="form-control" />
</div>
</div>
<div className="card-block btn-group" role="group">
<button
className="btn btn-success"
type="submit"
disabled={pristine || submitting}
>
Submit
</button>
<button
className="btn btn-danger fa fa-times"
onClick={this.props.changeTodoEditMode}
>
</button>
</div>
</form>
);
}
}
const randomNum = (() => {
const thing = Math.floor(Math.random() * 1000) + 1;
console.log('thing: ', thing);
console.log('notThing: ', TodoForm.props);
return thing;
})();
export default reduxForm({
form: `todo-${randomNum}`,
})(TodoForm);