Reaction/Redux Redux-Form预填充待更新的表单 [英] React/Redux Redux-Form Pre-Populate Form For Update

问题描述

我正在尝试使用redux-form库预先填充一个表单。我现在遇到的问题是，当单击Edit Item按钮时，item.id能够从Items或Item组件传递到List。这样，我就可以根据listItems数组检查它，并获取它的数据来填充表单。但在此之前，我创建了一个函数populateForm来尝试redux-form的dispatch/initialize函数用于"populating"表单。它可以正常工作，只是当我点击Add Item时，表单永远不会重置。我基本上需要做两件事。

1. 准备好选择单个项目的逻辑，并将其数据填充到表单中，以便可以编辑。
2. 计算表单在Edit Item单击后未重置的原因。

提前谢谢。

/Components/List.jsx

export class List extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      isModalOpen: false
    }

    this.resetFrom = this.resetForm.bind(this)
  }

  toggleModal () {
    this.setState({ isModalOpen: !this.state.isModalOpen })
  }

  deleteList (listId, e) {
    e.stopPropagation()

    this.props.listActions.deleteList(listId)
  }

  resetForm() {
    this.props.reset('items')
  }

  createItem (item) {
    let items = {
      id: uuid.v4(),
      sku: item.sku,
      text: item.text,
      price: item.price
    }

    this.props.itemActions.createItem(items) 
    this.props.listActions.connectToList(this.props.list.id, items.id)
    this.resetForm()
  }
  // UPDATED
  populateForm (item) {
    const { id, sku, text, price } = item
    this.props.dispatch(initialize('items', {
      id, sku, text, price
    }, ['id', 'sku', 'text', 'price']))
  }
  // WAS THIS
  //populateForm () {
     //this.props.dispatch(initialize('items', {
      //sku: "Stuff",
      //text: "blah", 
      //price: "this"
    //}, ['sku', 'text', 'price']))
  //}

  render () {
    const { list, ...props } = this.props
    const listId = list.id

    return (
      <div {...props}>
        <div className='list-add-item'>
          <button onClick={this.toggleModal.bind(this, listId)}>+</button>
        </div>

        <div className='list-header'
          onClick={() => props.listActions.updateList({id: listId, isEditing: true})} >

          <Editor
            className='list-title'
            isEditing={list.isEditing}
            value={list.title}
            onEdit={(title) => props.listActions.updateList({id: listId, title, isEditing: false})}>
          </Editor>

          <div className='list-delete'>
            <button onClick={this.deleteList.bind(this, listId)}>x</button>
          </div>
        </div>

        <Items 
          items={props.listItems}
          // UPDATED
          populateForm={(item) => this.populateForm(item)}
          // WAS THIS
          // populateForm={(id) => this.populateForm({id, isEditing: true})}
          openModal={this.toggleModal.bind(this)}>
        </Items>

        <Modal 
          className='list-add-item'
          openModal={this.state.isModalOpen}>
          // UPDATED
          <ItemForm
            onEdit={this.props.itemActions.updateItem}
            onSubmit={this.createItem.bind(this)}>
          </ItemForm>
          // WAS THIS
          // <ItemForm onSubmit={this.createItem.bind(this)}/>
        </Modal>
      </div>
    )
  }
}

function mapStateToProps (state, props) {
  return {
    lists: state.lists,
    listItems: props.list.items.map((id) => state.items[
        state.items.findIndex((item) => item.id === id)
    ]).filter((item) => item)
  }
}

function mapDispatchToProps (dispatch) {
  return {
    listActions: bindActionCreators(listActionCreators, dispatch),
    itemActions: bindActionCreators(itemActionCreators, dispatch),
    reset: bindActionCreators(reset, dispatch),
    dispatch: bindActionCreators(dispatch, dispatch)
  }
}

const { string, arrayOf, shape } = React.PropTypes

List.propTypes = {
  lists: arrayOf(shape({
    id: string.isRequired,
    title: string.isRequired
  }).isRequired)
}

export default connect(mapStateToProps, mapDispatchToProps)(List)

/Components/Items.jsx

export default class Items extends React.Component {
  render () {
    const {items, openModal, populateForm, ...props} = this.props

    return (
      <ul className='items'>{items.map((item) =>
        <Item
          className='item'
          key={item.id}
          id={item.id}
          sku={item.sku}
          text={item.text}
          price={item.price}
          // UPDATED
          populateForm={populateForm.bind(null, item)}
          // WAS THIS
          // populateForm={populateForm.bind(this)}
          openModal={openModal}>
        </Item>
      )}</ul>
    )
  }
}

/Components/Item.jsx

export default class Item extends React.Component {
  render () {
    const { openModal, populateForm, ...props } = this.props
    return (
      <span>
        <li>SKU: {this.props.sku}</li>  
        <li>ITEM: {this.props.text}</li>
        <li>PRICE: {this.props.price}</li>
        <button onClick={this.props.populateForm}>Edit Item</button>
      </span>
    )
  }
}

/Components/ItemForm.jsx

import React from 'react'
import { reduxForm } from 'redux-form'

class ItemForm extends React.Component {
  render() {
    const { fields: {sku, text, price}, handleSubmit } = this.props

    return (
      <form onSubmit={handleSubmit} >
        <label>SKU</label>
        <input type="text" {...sku}/>

        <label>Item</label>
        <input type="text" {...text} />

        <label>Price</label>
        <input type="text" {...price} />

        <button type="submit">Add item</button>
      </form>
    )
  }
}

ItemForm = reduxForm({
  form: 'items',
  fields: ['sku', 'text', 'price']
})(ItemForm);

export default ItemForm

推荐答案

有几个问题使我很难理解此代码。我真的不知道你想要达到什么目的。例如：

• List.jsx正在使用{id, isEditing: true}调用populateForm()，但populateForm()不带任何参数。

• 由于某种原因Items.jsx正在将populateForm绑定到this。为什么？

• Item.jsx将populateForm直接传递给onClick，因此其参数将成为事件。

相比之下，

• ItemForm.jsx是完美无缺的。👍

这篇关于Reaction/Redux Redux-Form预填充待更新的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！