Question

我有两个组件：一个容器组件和一个表示组件。

容器使用表示组件获取显示Post所需的所有信息和操作。在演示组件上，我有一种方法可以在呈现信息和编辑信息之间切换。当我编辑并提交有关帖子的数据时，我想从我拥有的所有不同输入中读取值，以便我可以发送一个动作。

但是，<form id='theForm' onSubmit={onHandleSubmit}>标记内的输入不。相反，<input>之外的所有<button type='submit'>和<form>都有form='theForm'属性。

我认为我可以在表单外部有多个<input>，但只要form属性指向相应的<form>，我就可以使用{{ {1}}收到。但是，我还没弄清楚如何做到这一点。

如何读取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)

Answer 1

免责声明：我还是React / Redux的新手，所以请大家用 big 来回答这个问题。

我认为您的方法稍微关闭，因为在提交时（无论是在<form>内部还是外部），您不需要绕过并从输入中收集任何数据。您的州应该始终位于一个中心的，合并的地方。

如果你提供了一个取消选项，那么在编辑期间将状态更新保持在状态的单独部分比直接修改“源”发布数据更优雅（恕我直言）。

您可以为Edit Post表单创建一个reducer，用于保存输入字段的键/值对。

当用户开始编辑时，您可以将原始Post数据克隆到特定于Edit表单的状态的这一新部分。当用户更改输入时，您可以调度“嘿，表单字段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数据保持不变。

希望这有助于慢跑一些想法......

您可以尝试其他一些示例/方法：

redux-form来自erikras
stateless-form-examples来自nackjicholson
redux-form-example

读取功能（无状态）组件中的<input />

1 个答案: