React/Redux Redux表單預填充表單更新

Question

我正在嘗試使用redux表單庫預先填充表單。我現在遇到的問題是，當單擊Edit Item按鈕時，可以將item.id從Items或Item組件傳遞到List（可能）。這樣我就可以對照我的listItems數組檢查它並獲取它的數據來填充表單。但在此之前，我創建了一個函數populateForm來嘗試用「populating」窗體的縮減形式的dispatch/initialize函數。它按預期工作，除了當我點擊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 

Answer 1

有幾個問題使得我的代碼難以遵循。我不確定你想要完成什麼。例如：

• List.jsx呼籲populateForm()與{id, isEditing: true}，但populateForm()不帶任何參數。

• 由於某種原因，Items.jsx約束populateForm至this。爲什麼？

• Item.jsx正在通過populateForm直接到onClick，所以它的參數將成爲事件。

• ItemForm.jsx相反，是完美無瑕的。