Redux-Form（v6）现场错误

从以前的版本开始，我对V6引入的Field仍然陌生。Redux-Form（v6）现场错误

从StackOverFlow Post开始，我似乎无法弄清楚什么是错的。

从本质上讲，我只是想用终极版表格连接的减速，并绑定行动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'));

来源

2016-12-07 Alejandro

我想你想看看在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;理由吗？我不认为这是必要的

来源

2017-07-13 21:42:35

Redux-Form（v6）现场错误

回答

相关问题