javascript – 读入功能(无状态)组件

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

但是,输入不在< form id ='theForm'onSubmit = {onHandleSubmit}>内.标签.相反,所有< input>和< button type ='submit'>在< form>之外有一个form =’theForm’属性.

我以为我可以有很多< input>在表单之外,但只要表单属性指向相应的< 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,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,isEditing
  }
}

export default connect(
  mapStatetoProps,{ loadPost,editPostSubmit }
)(PostSummaryContainer)

在我的演示组件上：

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

function PostSummaryView (props) {
  const {
    post,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