React/Redux Redux-Form更新用の事前入力フォーム

Question

私はredux-formライブラリを使用してフォームをあらかじめ入力しようとしています。私が今問題を抱えているのは、Edit ItemボタンをクリックしたときにをItemsまたはItemコンポーネントからListに（おそらく）渡すことができることです。そうすれば私のlistItems配列と照合してフォームにデータを取り込むことができます。しかしこれを行う前に、私は関数populateFormを作成して、redux形式のdispatch/initialize関数 "populating"のフォームを試してみてください。 Add Itemをクリックするとフォームがリセットされないことを除いて、期待通りに機能します。基本的に2つのことが必要です。

1. ロジックを取得して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は{id, isEditing: true}とpopulateForm()を呼び出しているが、任意のパラメータをpopulateForm()なりません。

• Items.jsxは、バインディングpopulateFormからthisです。どうして？

• Item.jsxは、onClickに直接populateFormを渡すので、そのパラメータはイベントになります。対照的に、完全である。