Redux-Form (v6) Ошибка поля

Исходя из предыдущей версии, я все еще новичок в Field, который представляет V6.

Следуя этому StackOverFlow Post, я не могу понять, что не так.

По сути, я просто хочу отображать переключатели с помощью Redux-Form, который соединяет редукторы и связанную функцию action CastVote

src/component/VoteTemplate.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field,  reduxForm } from 'redux-form';
const  { DOM: { input, select, textarea } } = React;
import { castVote } from '../actions/index';

const form = reduxForm({
  form: 'CastVote',
  fields: ['category']
})

class VoteTemplate extends Component {
  constructor(props) {
    super(props);
  }
  onSubmit(props){
    console.log('test!')
  }
  render() {
    const { handleSubmit, submitting } = this.props
    return (
      <main className="welcome container">
        <div className="row">
          <div className="col center-align s12">
            <h3>Title of the Poll</h3>
          </div>
        </div>
        <BarChart data={chartData} options={chartOptions}/>
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <div className="row">
            <div className="input-field col s12">
              <p>
                <label><Field name="category" component={input} type="radio" value="male"/> Male</label>
                <label><Field name="category" component={input} type="radio" value="female"/> Female</label>
              </p>
            </div>
            <div className="col input-field s12">
              <button className="btn waves-effect waves-light" type="submit" name="action">Submit
                <i className="fa fa-paper-plane-o"></i>
              </button>
            </div>
          </div>
        </form>
      </main>
    )
  }
}

VoteTemplate = reduxForm({
  form: 'CastVote'
})(VoteTemplate);

export default VoteTemplate = connect(null, castVote)(VoteTemplate)

редуктор

import { FETCH_VOTES } from '../actions/types'
export default function(state={}, action){
  switch (action.type) {
    case FETCH_VOTES:
      console.log(action.payload)
      return {...state, message: action.payload.message}
  }
  return state;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import thunk from 'redux-thunk';

import App from './components/app';
import VotesContainer from './containers/votes-container';
import VoteTemplate from './components/vote-template';
import Login from './components/auth/login';
import Signup from './components/auth/signup';
import reducers from './reducers/';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)))

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <IndexRoute component={VoteTemplate} />
        <Route path="allposts" component={VotesContainer} />
        <Route path="login" component={Login} />
        <Route path="signup" component={Signup} />
      </Route>
    </Router>
  </Provider>
  , document.querySelector('#project'));

person Alejandro    schedule 07.12.2016    source источник


Ответы (1)


Я думаю, вы хотите посмотреть на пример в документах <Field.../>.

Я думаю, вы должны использовать это так

<Field
  name="category"
  component="input" // you should pass a string in this case and not the `input` object
  type="radio"
  value="male"
/>

Также есть ли причина const { DOM: { input, select, textarea } } = React; ? я не думаю, что это необходимо

person Vincent Taing    schedule 13.07.2017