Question

我尝试使用redux-form库预先填充表单。我现在遇到的问题是，当item.id时Items或Item组件List能够传递Edit Item listItems单击}按钮。这样我可以检查我的populateForm数组并抓住它的数据来填充表单。但在此之前，我创建了一个函数dispatch/initialize，以便为＆＃34; populating＆＃34;尝试使用redux-form的Add Item函数。表格。它按预期工作，除了当我单击Edit Item时，表单永远不会重置。我基本上需要做两件事。

获取选择单个项目的逻辑，并将其填入表格中，以便对其进行编辑。
说明在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/List.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/Items.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/Item.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

/components/ItemForm.jsx

val metrics = new BinaryClassificationMetrics(probabilitiesAndLabels,10);

Answer 1

有几个问题使我难以理解这段代码。我不确定你要完成什么。例如：

List.jsx使用populateForm()致电{id, isEditing: true}，但populateForm()不接受任何参数。
由于某种原因，Items.jsx将populateForm绑定到this。为什么呢？
Item.jsx正在将populateForm直接传递给onClick，因此其参数将成为事件。
ItemForm.jsx完美无瑕。

React / Redux Redux-Form Pre-Populate表单进行更新

1 个答案: