Прочитайте <input> в функциональном (не имеющем состояния) компоненте

У меня есть два компонента: один контейнерный компонент и один презентационный компонент.

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

Однако входные данные не находятся внутри тега <form id='theForm' onSubmit={onHandleSubmit}>. Вместо этого все <input> и <button type='submit'>, которые находятся за пределами <form> и имеют атрибут form='theForm' .

Я думал, что у меня может быть много <input> вне формы, но до тех пор, пока form указывает на соответствующий <form>, я могу прочитать его значения, используя событие, которое handleOnSubmit (e) {...} получает. Тем не менее, я не понял, как это сделать.

Как я могу прочитать значения входов в моей функции handleOnSubmit? Или это совершенно неправильная идея, от которой я должен отказаться?

// PostSummaryContainer.js
import React, { PropTypes, Component } from 'react'
import { connect } from 'react-redux'

import { loadPost, editPost, editPostCancel, editPostSubmit } from '../../actions/posts'

import PostSummaryView from '../../views/details/summary'

class PostSummaryContainer extends Component {
  constructor (props) {
    super(props)
    this.handleOnSubmit = this.handleOnSubmit.bind(this)
    this.handleOnCancel = this.handleOnCancel.bind(this)
    this.handleOnSubmit = this.handleOnSubmit.bind(this)
  }

  handleOnEdit (e) {
    e.preventDefault()
    this.props.editPost()
  }

  handleOnCancel (e) {
    e.preventDefault()
    this.props.editPostCancel()
  }

  handleOnSubmit (e) {
    e.preventDefault()

    // How do I read the input values? <--------------------
  }

  componentWillMount () {
    const {
      id,
      loadPost
    } = this.props

    loadPost(id)
  }

  render () {
    const {
      post,
      isLoading,
      isEditing
    } = this.props

    const viewProps = {
      bacon,
      isLoading,
      isEditing,
      handleOnEdit: this.handleOnEdit,
      handleOnCancel: this.handleOnCancel,
      handleOnSubmit: this.handleOnSubmit
    }

    return (
      <PostSummaryView {...viewProps} />
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  const {
    params: {
      id
    }
  } = ownProps

  const post = state.entities.post[id]

  const {
    isLoading,
    isEditing
  } = state.posts

  return {
    id,
    post,
    isLoading,
    isEditing
  }
}

export default connect(
  mapStateToProps,
  { loadPost, editPost, editPostCancel, editPostSubmit }
)(PostSummaryContainer)

В моем компоненте презентации:

// PostSummmaryView.js
import React from 'react'
import moment from 'moment'

function PostSummaryView (props) {
  const {
    post,
    isLoading,
    isEditing,
    handleOnEdit,
    handleOnCancel,
    handleOnSubmit
  } = props

  const formId = 'editPostForm'

  return (
    isLoading
      ? <div>Loading...</div>
      : <div className='row'>
          {isEditing && <form id={formId} onSubmit={handleOnSubmit}><input type='text' name='name' /></form>}

          <div className='col-md-6'>
            <img src={post.media.url} className='img-responsive' />
            {isEditing && <input type='file' name='media' form={formId}/>}
          </div>
          <div className='col-md-6'>

            <h1>{post.name}</h1>
            <p>
              {moment(post.publicationDate).format('dddd, MMMM Do')}
            </p>

            <hr />

            <p className='text-left'>
              {post.description || 'Lorem ipsum dolor sit amet, consectetur adipisici elit...'}
            </p>

            {isEditing
              ? <div>
                  <button className='btn btn-lg btn-default' onClick={handleOnCancel}>Cancel</button>
                  <button type='submit' className='btn btn-lg btn-default' form={formId}>Submit</button>
                </div>
              : <button className='btn btn-lg btn-default' onClick={handleOnEdit}>Edit</button>
            }

          </div>
        </div>
  )
}

export default PostSummaryView
7 голосов | спросил Sparragus 18 FebruaryEurope/MoscowbThu, 18 Feb 2016 06:30:02 +0300000000amThu, 18 Feb 2016 06:30:02 +030016 2016, 06:30:02

1 ответ


0
  

Отказ от ответственности: я все еще новичок в React /Redux, поэтому примите этот ответ с большим зерном соли.

Я думаю, что ваш подход немного отключен, так как вам не нужно обходиться и собирать какие-либо данные из входных данных при отправке (как внутри, так и вне <form>). Ваше государство всегда должно быть в одном центральном объединенном месте.

Если вы укажете опцию Отмена, держать данные публикации обновленными во время редактирования в отдельной части состояния будет более элегантно (ИМХО), чем прямое изменение «исходных» данных публикации.

Вы можете создать редуктор для формы редактирования сообщения, в котором хранятся пары ключ /значение для полей ввода.

Когда пользователь начинает редактирование, вы можете клонировать исходные данные публикации в эту новую часть состояния, определенного для формы редактирования. Когда пользователь изменяет входные данные, вы можете отправлять действия, говоря «эй, поле формы X было изменено на значение Y», которое можно было перевести в состояние без изменения исходных данных Post. Пример псевдокода объекта состояния в этом потоке:

{
    // The actual Post data
    post: {
        media: {...},
        title: "My First Post",
        publicationDate: 1455768160589,
        description: "Lorem ipsum dolor sit amet"                  
    },

    // The temporary Post data in the Edit form
    postForm: {
        media: {...},
        title: "My Turbo-Charged First Post",
        publicationDate: 1455769951276,
        description: "Updated description yadda blah"                  
    }
}

Затем в своем компоненте презентации вы можете отключить входные значения postForm вместо post

Каждому входу будет назначена функция обработчика изменений, поэтому обновления немедленно отражаются в состоянии (или не отражается, в зависимости от вашей логики /редукторов проверки). то есть:.

 // In your actions associated with `Post`
// ------------------------------------------
function updateForm(field, value) {
    return {
        type: UPDATE_FORM,
        field,
        value
    }
}

// In your container
// ------------------------------------------
handleOnEdit(event) {
    postActions.updateForm(event.target.name, event.target.value)
}

// In your reducer
// ------------------------------------------
switch (action.type) {
    case UPDATE_FORM:
        return {
            ...state,
            [action.field]: action.value
        }
}

// In your presentational component's render() method
// ------------------------------------------
const {postForm, handleOnEdit} = this.props
const descriptionMarkup = (
    isEditing
    ? <input type='text' name='description' value={postForm.description} onChange={handleOnEdit} />
    : (post.description || 'Lorem ipsum dolor sit amet, consectetur adipisici elit...')
)
// ...
<p className='text-left'>
    {descriptionMarkup}
</p>

Если вы следуете этому шаблону (и опять же, не уверены, что он «правильный»!), отправка формы становится такой же простой, как и выполнение чего-либо с postForm объект. Этот объект всегда должен отражать самые последние и самые большие входные значения формы.

Отменить форму становится так же просто, как установить для postForm дерева состояний значение {}. Исходные данные Post остаются прежними.

Надеюсь, что это помогает подтолкнуть некоторые идеи ...

Некоторые другие примеры /подходы, которые вы можете попробовать:

ответил rkd 18 FebruaryEurope/MoscowbThu, 18 Feb 2016 07:37:32 +0300000000amThu, 18 Feb 2016 07:37:32 +030016 2016, 07:37:32

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132