我有两个组件:一个容器组件和一个展示组件。

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

但是，输入不在<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

最佳答案

Disclaimer: I'm still new to React/Redux, so take this answer with a big grain of salt.

我认为您的方法略有，因为您在提交时不需要四处走动并从输入中收集任何数据(无论是在 <form> 内部还是外部)。您的状态应始终位于一个集中的、统一的位置。

鉴于您提供了一个取消选项，在编辑期间在状态的单独部分更新 Post 数据比直接修改“源”Post 数据更优雅(恕我直言)。

您可以为 Edit Post 表单创建一个缩减程序，为输入字段保留键/值对。

当用户开始编辑时，您可以将原始的 Post 数据克隆到特定于编辑表单的状态的这个新部分。当用户更改输入时，您可以分派(dispatch)操作说“嘿，表单字段 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 .

每个输入都会被赋予一个更改处理函数，因此更新会立即反射(reflect)在状态中(或者不反射(reflect)，具体取决于您的验证逻辑/缩减器)。 即:

// 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 做一些事情一样简单目的。该对象应始终反射(reflect)最新和最好的表单输入值。

取消表单就像设置 postForm 一样简单状态树的一部分到{} .原始 Post 数据保持不变。

希望这有助于激发一些想法...

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

• redux-form通过 erikras
• stateless-form-examples通过 nackjicholson
• redux-form-example

关于javascript - 在功能性(无状态)组件中读取 <input>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35472283/