मेरे पास एक साधारण टूडो ऐप है जिसमें मेरे रेडक्स स्टोर में 'टोडोस' की एक सरणी है। मेरा 'टोडो' घटक स्टोर में प्रत्येक 'todo' पर नक्शा करता है और 'टोडोफॉर्म' घटक प्रस्तुत करता है जो रेडक्स-फॉर्म v6 का उपयोग करता है।आप उसी पृष्ठ पर रेडक्स-फॉर्म v6 के साथ कई रूपों को कैसे बनाते हैं?
जैसा कि अब है, हर 'todo' एक ही फॉर्म नाम/कुंजी साझा करता है, इसलिए हर बार जब मैं 'शीर्षक' फ़ील्ड में कुछ इनपुट करता हूं, तो यह प्रत्येक todo के 'शीर्षक' को बदल देता है। मुझे अद्वितीय फ़ील्ड नामों का उपयोग करके चारों ओर एक काम मिला, लेकिन मुझे डर है कि ऐप बढ़ने के साथ जटिल चीजों पर जा रहा है, और अद्वितीय फॉर्म नामों का उपयोग करना पसंद करेगा, इसलिए प्रत्येक फ़ील्ड में अन्य फॉर्मों के साथ हस्तक्षेप किए बिना एक ही नाम हो सकता है
(टोडोफॉर्म 1, टोडोफॉर्म 2, टोडोफॉर्म 3 में टोडोफॉर्म के बजाय 'शीर्षक 1', 'title2', 'title3' फ़ील्ड्स वाले एक अद्वितीय 'शीर्षक' फ़ील्ड हो सकता है)।
मैंने टोडोफॉर्म के प्रोप तक पहुंचने का प्रयास किया ताकि मैं प्रत्येक फॉर्म की कुंजी को घटक की अद्वितीय आईडी के रूप में सेट कर सकूं, लेकिन ऐसा लगता है कि घटक को प्रोप को प्रारंभिक रूप से प्राप्त नहीं होता है।
मैंने तुरंत एक त्वरित कार्य करने की कोशिश की जहां यह एक यादृच्छिक संख्या थूकता है, और उस संख्या का उपयोग फॉर्म के नाम के रूप में करता है, लेकिन यह भी काम नहीं करता है।
मैं अपने सभी टोडोस के माध्यम से कैसे मैप कर सकता हूं और एक अद्वितीय फॉर्म कुंजी के साथ v6 redux-form प्रस्तुत कर सकता हूं?
यहां ऐप, कंसोल और रेडक्स डेवटोल्स की एक तस्वीर है। वहाँ 3 'सब' है, लेकिन वहाँ केवल एक ही रूप है कि उन सब को जोड़ता है, है कार्यसूची-926, भले ही प्रत्येक प्रपत्र कुंजी बेतरतीब ढंग से एक तुरंत लागू समारोह में उत्पन्न किया जाना चाहिए था:
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);