如何使用redux-forms v6在同一页面上创建多个表单? [英] How do you create multiple forms on the same page with redux-forms v6?

问题描述

我有一个简单的待办事项应用程序，其中我的redux存储区包含一个待办事项"数组.我的"Todo"组件映射到商店中的每个"todo"，并呈现一个使用redux-forms v6的"TodoForm"组件.

I have a simple todo app in which my redux store contains an array of 'todos'. My 'Todo' component maps over every 'todo' in the store and renders a 'TodoForm' component that uses redux-forms v6.

现在，每个待办事项"共享相同的表单名称/键，因此，每次我在标题"字段中输入内容时，它都会更改每个待办事项的标题".我通过使用唯一的字段名称找到了解决方法，但是我担心随着应用程序的增长，它将使事情变得更加复杂，并且宁愿使用唯一的表单名称，以便每个字段都可以使用相同的名称而不会干扰其他表单

As it is now, every 'todo' shares the same form name/key, so every time I input something in the 'title' Field, it changes the 'title' of every todo. I found a work around by using unique Field names, but I fear it's going to over complicate things as the app grows, and would prefer to use unique Form names so every field can have the same name without interfering with the other forms

(TodoForm1，TodoForm2，TodoForm3都可以具有唯一的"title"字段，而不是包含"title1"，"title2"，"title3"字段的TodoForm).

(TodoForm1, TodoForm2, TodoForm3 can all have a unique 'title' Field instead of TodoForm containing 'title1', 'title2', 'title3' Fields).

我尝试访问TodoForm的props，以便可以将每个表单的键设置为组件的唯一ID，但是似乎组件并没有这么早就收到props.

I tried accessing the TodoForm's props so I could set each form's key as the component's unique id, but it doesn't seem like the component receives props that early.

我还尝试制作一个立即调用的函数，该函数会吐出一个随机数，并使用该数字作为表单的名称，但这还是行不通的.

I also tried making an immediately invoked function where it spits out a random number, and using that number as the form's name, but that also didn't work.

如何才能映射所有待办事项并使用唯一的表单键呈现v6 redux表单?

How can I can map through all my todos and render a v6 redux-form with a unique form key?

这是应用程序，控制台和redux devtools的图片.有3个待办事项"，但是只有一种形式将它们连接在一起，即todo-926，即使每个形式键都应该在立即调用的函数中随机生成:

Here's a picture of the app, console, and redux devtools. There's 3 'todos', but there's only one form that connects them all, todo-926, even though each form key should have been randomly generated in an immediately invoked function:

HomePageMainSection.index.js

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:

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:

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);

推荐答案

要为表单提供动态键，应在 TodoForm 组件上使用 form 属性:

For giving your forms dynamic key you should use form attribute on your TodoForm component:

renderTodo() {
    if (this.state.editMode) {
      return (
        <TodoForm
          form={'todo-' + this.props.todo.id}  
          todo={this.props.todo} changeTodoEditMode={this.changeTodoEditMode}
          updateTodo={this.props.updateTodo}
        />
      );
    }
 [...]
}

(不是 this.props.todo.id 可能是您的 randomNum 函数调用)

(Instead of this.props.todo.id could be your randomNum function call)

API参考: http://redux-form.com/6.0.2/docs/api/Props.md/

这篇关于如何使用redux-forms v6在同一页面上创建多个表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！