Redux-Form (v6) 字段错误答案

【问题标题】：Redux-Form (v6) Field errorRedux-Form (v6) 字段错误
【发布时间】：2016-12-07 06:36:43
【问题描述】：

从以前的版本开始，我对 V6 引入的 Field 仍然很陌生。

根据这个StackOverFlow Post，我似乎无法找出问题所在。

本质上，我只想使用 Redux-Form 来呈现单选按钮，它连接了 reducer 并绑定了动作 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'));

【问题讨论】：

标签： redux-form react-redux-form

【解决方案1】：

我想你想看看docs<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; ?我觉得没必要

【讨论】：