读取功能(无状态）组件中的<输入>

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

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

但是，输入不在 <form id='theForm' onSubmit={onHandleSubmit}> 标记内。相反，<form>外部的所有<input>和<button type='submit'>都具有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