2016-09-19 3 views
2

익명 함수를 사용하여 구성 요소를 정의하면 값이 전송 처리기로 전달되지 않습니다. 나는 다음과 같은 간단한 형태로 만들어 REDUX 형태 6.0.5값이 redux-form의 submit 함수에 전달되지 않음 6.0.5

을 사용하고 있습니다 :

class TestForm extends Component { 
    constructor(props) { 
     super(props); 
    } 

    submit(e) { 
     console.log(e); 
    } 

    renderField(field) { 
     return (
      <input {...field.input} type="text" className="form-control" placeholder={field.placeholder} /> 
     ); 
    } 

    render() { 
     const handleSubmit = this.props.handleSubmit; 

     return (
      <form onSubmit={handleSubmit(this.submit)}> 
       <div className="form-group"> 
        <label>Title</label> 
        <Field name="title" 
         placeholder="Title" 
         component={this.renderField} /> 
       </div> 

       <div className="form-group"> 
        <label>Category</label> 
        <Field name="category" 
         placeholder="Category" 
         component={category => (
         <input type="text" className="form-control" {...category}/> 
         ) 
         } /> 
       </div> 

       <button type="submit" className="btn btn-primary">Submit</button> 
      </form> 
     ); 
    } 
} 

제출하면 (e)는이라고, 콘솔 제목 필드의 값을 표시를하지만 범주에 대한 가치 표시됩니다.

카테고리 필드에 내 익명 기능에 문제가 있습니까? 아니면 익명의 기능이 구성 요소로 지원되지 않습니까?

답변

1

나는 실제로 당신과 같은 과정에 있으며 문제가 무엇인지에 대해 게시하고 싶습니다. V4에서 V6으로 급격한 변화가 있으며, V4를 레 펙스 형태로 사용하고 있습니다. 저는 최신 정보를 습득하여 모든 것을 업데이트했지만 고통 스럽지만 양식 저장에 대한 해결책을 찾았습니다. 먼저 우선 { connect }{ reduxForm }과 별도로 사용해야합니다. 게다가 필드가 더 이상 존재하지 않으므로 { reduxForm, Field } 이것은 V6를위한 것입니다. 보일 필요가있는 작업 코드에 관해서.

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { reduxForm, Field } from 'redux-form'; 
import { createPost } from '../actions/index'; 

const renderInput = field => (
    <div className="form-group"> 
    <label>{field.label}</label> 
    <input className="form-control" {...field.input} type= {field.type}/> 
    </div> 
); 

const renderTextarea = field => (
    <div className="form-group"> 
    <label>{field.label}</label> 
    <textarea className="form-control" {...field.input}/> 
    </div> 
); 


class PostsNew extends Component{ 
    render(){ 
    const { handleSubmit } = this.props; 
    return (
     <form onSubmit={handleSubmit(this.props.createPost)}> 
     <h3>Create A New Post</h3> 

     <Field 
      label="Title" 
      name="title" 
      type="text" 
      component={renderInput} /> 

     <Field 
      label="Categories" 
      name="categories" 
      type="text" 
      component={renderInput} 
     /> 

     <Field 
      label="Content" 
      name="content" 
      component={renderTextarea} 
     /> 

     <button type="submit" className="btn btn-primary">Submit</button> 
     </form> 
    ); 
    } 
} 

export default reduxForm({ 
    form: 'PostsNewForm', 
})(connect(null,{ createPost })(PostsNew)); 

정확한 질문에 마이그레이션 가이드가없는 경우 어떻게하면 도움이되기를 바랍니다. v5-v6

관련 문제