Tôi có một ứng dụng cần làm đơn giản, trong đó cửa hàng Redux của tôi chứa một mảng 'todos'. Thành phần 'Todo' của tôi ánh xạ trên mọi 'todo' trong cửa hàng và hiển thị thành phần 'TodoForm' sử dụng các biểu mẫu redux v6.Làm cách nào để tạo nhiều biểu mẫu trên cùng một trang với các biểu mẫu redux v6?
Hiện tại, mỗi 'todo' có cùng tên/khóa, vì vậy mỗi khi tôi nhập vào một cái gì đó trong trường 'title', nó sẽ thay đổi 'title' của mọi việc cần làm. Tôi tìm thấy một công việc xung quanh bằng cách sử dụng tên trường duy nhất, nhưng tôi sợ nó sẽ phức tạp hơn khi ứng dụng phát triển và muốn sử dụng tên Biểu mẫu duy nhất để mọi trường có thể có cùng tên mà không can thiệp vào các biểu mẫu khác
(TodoForm1, TodoForm2, TodoForm3 tất cả có thể có một trường 'tiêu đề' duy nhất thay vì TodoForm chứa 'title1', 'title2', 'title3' Fields).
Tôi đã thử truy cập vào các đạo cụ của TodoForm để tôi có thể đặt khóa của mỗi biểu mẫu làm id duy nhất của thành phần, nhưng dường như thành phần đó không nhận được đạo cụ sớm.
Tôi cũng đã thử thực hiện một chức năng gọi ngay lập tức, nơi nó phun ra một số ngẫu nhiên và sử dụng số đó làm tên của biểu mẫu, nhưng điều đó cũng không hoạt động.
Làm cách nào để có thể ánh xạ qua tất cả các biểu tượng của tôi và hiển thị biểu mẫu dạng xux đỏ với khóa biểu mẫu duy nhất?
Dưới đây là hình ảnh về ứng dụng, bảng điều khiển và trình chuyển đổi thông lượng. Có 3 'todos', nhưng chỉ có một hình thức kết nối tất cả chúng, todo-926, mặc dù mỗi phím dạng nên đã được tạo ra một cách ngẫu nhiên trong một chức năng ngay lập tức gọi:
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);