Я пытаюсь предварительно заполнить форму после нажатия кнопки в моем Item. У меня есть действия, чтобы можно было обновить элемент, проблема заключается в том, чтобы предварительно заполнить форму правильным элементом, чтобы иметь возможность чтобы отправить это действие.

-----------------
| + List        | << Name of the list
-----------------
| SKU: 12345    | << Item
| ITEM: Bananas |
| PRICE: $1.00  |
|               |
| <edit>        | << Button triggering the modal and form. Need to pre-populate the form onClick
-----------------

/components/List.jsx

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

    this.state = {
      isModalOpen: false
    }
  }

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

 ...

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

    return (
      ...

        <Items 
          items={props.listItems}
          openModal={this.toggleModal.bind(this)}>
        </Items>

        <Modal 
          className='list-add-item'
          openModal={this.state.isModalOpen}>
          <ItemForm 
            itemActions={this.props.itemActions} 
            listActions={this.props.listActions} 
            listId={listId}>
          </ItemForm>
        </Modal>
      </div>
    )
  }
}

/components/ItemForm.jsx

import React from 'react'
import uuid from 'node-uuid'

class ItemForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      isEditing: false
    }
  }

  handleSubmit = (event) => {
    event.preventDefault()

    let sku = this.refs.sku.value.trim()
    let text = this.refs.text.value.trim()
    let price = this.refs.price.value.trim()

    const item = { id: uuid.v4(), sku, text, price }

    // don't do anything if any field is left blank
    if (!item.sku || !item.text || !item.price) { return }

    this.props.itemActions.createItem(item)
    this.props.listActions.connectToList(this.props.listId, item.id)
    // reset the form after submission
    this.refs.itemForm.reset()
  }

  render() {
    const { ...props } = this.props

    return (
      <form ref="itemForm" onSubmit={this.handleSubmit}>
          <label>SKU</label>
          <input 
            type="text" 
            placeholder="SKU" 
            autoFocus={true}
            ref='sku'
            defaultValue={this.props.sku}
            onBlur={this.finishEdit}
            onKeyPress={this.checkEnter}></input>

          <label>Item</label>
          <input 
            type="text"
            placeholder="Item" 
            autoFocus={true}
            ref='text'
            defaultValue={this.props.text}
            onBlur={this.finishEdit}
            onKeyPress={this.checkEnter}></input>

          <label>Price</label>
          <input 
            type="text"
            placeholder="Price"
            autoFocus={true}
            ref='price'
            defaultValue={this.props.price}
            onBlur={this.finishEdit}
            onKeyPress={this.checkEnter}></input>

        <button type="submit">{ this.state.isEditing ? 'Edit Item' : 'Add Item' }</button>
      </form>
    )
  }
}

export default ItemForm

/components/Items.jsx

export default class Items extends React.Component {
  render () {
    const {items, onEdit, ...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}
          openModal={this.props.openModal}>
        </Item>
      )}</ul>
    )
  }
}

/components/Item.jsx

export default class Item extends React.Component {
  render () {
    const { openModal, ...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.openModal}>Edit Item</button>
      </span>
    )
  }
}
0
Diego 16 Апр 2016 в 06:05

2 ответа

Лучший ответ

Вместо этого я использовал redux-form, так как мое приложение было настроено, поэтому было сложно решить проблему, с которой я столкнулся. рабочая версия находится здесь

0
Community 23 Май 2017 в 12:31

Есть разные способы сделать это. Например, вы можете выполнить следующие действия:

  1. компоненты / список: добавьте внутреннее состояние, чтобы каждый момент знать, какой элемент из списка выбран. Передайте этот selectedItem в itemForm в качестве реквизита. Создайте метод selectItem, который обновит это состояние. Передайте этот метод selectItem в качестве реквизита вашим компонентам / элементам. Не забудьте bind передать его компоненту.
  2. компоненты / элементы: добавьте в качестве обработчика onClick selectItem, переданный компоненту как свойства.
  3. components / itemForm: в constructor создайте состояние с информацией об элементе, переданной в реквизитах. Добавьте willReceiveProps и обновляйте внутреннее состояние компонента каждый раз, когда вы получаете обновленные реквизиты с возможно новым выбранным элементом.

Надеюсь, вы нашли это полезным и решили вашу проблему.

0
Llorenç Muntaner 16 Апр 2016 в 10:57