React/Redux перед заполнением формы нажатием

Question

Я пытаюсь предварительно заполнить свою форму после нажатия кнопки в своем 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> 
    ) 
    } 
} 

/компоненты/Пункт .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> 
    ) 
    } 
} 

Answer 1

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

Answer 2

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

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

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