redux-formを使用してテキストフィールドに入力することはできません

Question

私はredux-formを使用するモーダルでフォームを持っています。いくつかのテキストフィールドがありますが、入力することはできません。私の疑問は、テキストフィールドがredux形式からonChangeイベントを取得しないことですが、私は何が良いか何か手がかりを見つけることができませんでした。

私のコードは次のとおりです。

import React from 'react' 
import { Button, Modal, Form, Message } from 'semantic-ui-react' 
import { Field, reduxForm } from 'redux-form' 

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => { 
    console.log(input) 
    return (
    <Form.Field> 
    <label>{label}</label> 
    <input {...input} placeholder={label} type={type} /> 
    {touched && (error && <Message error>{error}</Message>)} 
    </Form.Field> 
)} 

let AddNewModal = (props) => { 
    const { handleSubmit, pristine, submitting, closeNewSite, isAddNewOpen, submit } = props 

    return (
    <Modal dimmer='blurring' open={isAddNewOpen} onClose={closeNewSite}> 
     <Modal.Header>Add a new site</Modal.Header> 
     <Modal.Content> 
     <Form onSubmit={handleSubmit}> 
      <Form.Group widths='equal'> 
      <Field name='domain' type='text' component={renderField} label='Domain' /> 
      <Field name='sitemap' type='text' component={renderField} label='Sitemap URL' /> 
      </Form.Group> 
      /** 
      * Other fields 
      */
      <Button type='submit' disabled={pristine || submitting}>Save</Button> 
     </Form> 
     </Modal.Content> 
     <Modal.Actions> 
     <Button color='black' onClick={closeNewSite} content='Close' /> 
     <Button positive icon='save' labelPosition='right' onClick={submit} content='Save' disabled={pristine || submitting} /> 
     </Modal.Actions> 
    </Modal> 
) 
} 

export default reduxForm({ 
    form: 'newsite' 
})(AddNewModal) 

Answer 1

私は実際に同様の問題がありました。フォーム検証のために作業しているコードをredux形式のV6で公開します。今は動作しますが、見たいものはcomponentDidMount、handleInitialize、handleFormSubmitです。私はこれを考え出したところlink。

/** 
* Created by marcusjwhelan on 10/22/16. 
*/ 

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

const renderInput = ({ input, label, type, meta: {touched, invalid, error }}) => (
    <div className={`form-group ${touched && invalid ? 'has-danger' : ''}`}> 
    <label>{label}</label> 
    <input className="form-control" {...input} type={type}/> 
    <div className="text-help" style={{color: 'red'}}> 
     { touched ? error : '' } 
    </div> 
    </div> 
); 

const renderTextarea = ({ input, label, type, meta: {touched, invalid, error }}) => (
    <div className={`form-group ${touched && invalid ? 'has-danger' : ''}`}> 
    <label>{label}</label> 
    <textarea className="form-control" {...input}/> 
    <div className="text-help" style={{color: 'red'}}> 
     { touched ? error : '' } 
    </div> 
    </div> 
); 

class PostsNew extends Component{ 
    componentDidMount(){ 
    this.handleInitialize(); 
} 
handleInitialize(){ 
    const initData = { 
    "title": '', 
    "categories": '', 
    "content": '' 
    }; 
    this.props.initialize(initData); 
} 

handleFormSubmit(formProps){ 
    this.props.createPost(formProps) 
} 

render(){ 
    const { handleSubmit } = this.props; 
    return (
    <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
     <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> 
); 
} 
} 

function validate(formProps){ 
    const errors = {}; 

    if(!formProps.title){ 
    errors.title = 'Enter a username'; 
    } 
    if(!formProps.categories){ 
    errors.categories = 'Enter categories'; 
    } 
    if(!formProps.content){ 
    errors.content = 'Enter content'; 
    } 
    return errors; 
} 

const form = reduxForm({ 
    form: 'PostsNewForm', 
    validate 
}); 

export default connect(null, { createPost })(form(PostsNew)); 

Answer 2

問題が見つかりました。私はredux形式の減速機を注入することを忘れた。

Answer 3

私はレデューサーを追加しましたが、同じ問題がありました。最後に、私はattr 'フォーム'を追加する必要があることが分かった。

const reducers = { 
    routing, 
    form: formReducer 
};