Question

从以前的版本开始，我还是V6引入的Field的新手。

从StackOverFlow Post开始，我似乎无法弄清楚出了什么问题。

基本上，我只想使用连接Reducer的Redux-Form渲染单选按钮，并绑定动作CastVote函数

的src /组件/ 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'));

Answer 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;？我认为没有必要

Redux-Form（v6）字段错误

1 个答案: