Не могу набрать в текстовом поле, используя приставку

Question

Не могу набрать в текстовом поле, используя приставку

9

У меня есть форма в модальной форме с использованием редукционной формы. У меня есть несколько текстовых полей, но вы не можете вводить их. Мое подозрение в том, что текстовое поле не получает событие 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)

Hunrik 22 окт. 2016, в 22:16

Источник

Теги:

reactjs

redux

redux-form

3 ответа

Ещё вопросы

Jin · Answer 1 · 2016-10-26T07-00-00.000Z

Я добавил редуктор и по-прежнему получил ту же проблему. Наконец, я обнаружил, что он должен добавить форму attr '.

const reducers = {
  routing,
  form: formReducer
};

Вы должны вызывать переменную formReducer просто «form», а затем делать redurs = {routing, form} и nothign else.
так почему ты не голосовал против меня? А? Зачем? #joking #pleaseUpvoteMe
Пока я не нашел решение, это вызвало у меня сильную головную боль ...

Hunrik · Answer 2 · 2016-10-23T18-56-00.000Z

Я нашел проблему. Я забыл ввести редуктор редукционной формы.

Я использовал это так, как это redux-form.com/6.1.1/docs/api/Reducer.md

mjwrazor · Answer 3 · 2016-10-22T23-17-00.000Z

У меня действительно была аналогичная проблема. Я отправлю код, над которым я работаю, для проверки формы с V6 редукционной формы. Он работает прямо сейчас, но вещи, которые вы хотите посмотреть, это componentDidMount, handleInitialize и handleFormSubmit. Где я понял эту ссылку .

/**
* 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));

Я пытался использовать мой, как это. Но это тоже не работает.
Похоже, вы не включили функцию подключения в свой код. Вы можете увидеть в нижней части моего кода. Также я не уверен, что вы делаете с <Form.Field> . У меня есть <Поле в компоненте, и визуализировать <вход> внутри вызова компонента. Также вы можете захотеть сделать это контейнером, а не функциональным компонентом.