使用MaterialUI中的選擇字段和Redux表單時出錯

Question

我抽象了SelectField material-ui組件，並嘗試將其插入到Redux表單中，但它拋出了一個我似乎無法解決的錯誤。我相信我的React組件類是正確實現的，但是錯誤消息說不是。下面

錯誤：

Error in ./src/components/new_entry_copy.js 
Syntax error: Unexpected token, expected } (37:21) 

    35 | 
    36 | class MaterialUiForm extends Component { 
> 37 | constructor(props) { 
    |     ^
    38 |  super(props) 
    39 |  this.state = { 
    40 |  category: null, 

@ ./src/components/app.js 28:22-61 

這似乎不可思議，因爲TextField的呈現沒有問題。這似乎只發生在SelectField組件上。

import React, { Component, PropTypes } from "react"; 
import ReactDOM from "react-dom"; 
import { reduxForm, Field, Form } from "redux-form"; 
import { createEntry } from "../actions/index"; 
import TextField from "material-ui/TextField"; 
import SelectField from "material-ui/SelectField"; 
import MenuItem from "material-ui/MenuItem"; 
import injectTapEventPlugin from "react-tap-event-plugin"; 
import RaisedButton from "material-ui/RaisedButton"; 


injectTapEventPlugin(); 

const renderTextField = ({ input,label }) => (
    <TextField 
     { ...input } 
     hintText="Who did you ask?" 
     floatingLabelText={ label } 
     floatingLabelFixed={ true } 
    /> 

); 

const renderSelectField = ({ input,label,children }) => (
    <SelectField 
     { ...input } 
     floatingLabelText={ label } 
     floatingLabelFixed={true} 
     value={this.state.outcome} 
     onChange={(event, index, value) => this.setState({outcome: value })}> 
     children={children} /> 
); 
) 


class MaterialUiForm extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     category: "", 
     outcome: "" 
    } 

    }; 

    onSubmit(props) { 
    console.log(props); 
    }; 

    render() { 
    const { handleSubmit } = this.props; 
    return (
     <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
     <div className="ask"> 
      <Field name="ask" component={renderTextField} label="Ask" /> 
     </div> 

     <div className="askee"> 
      <Field name="askee" component={renderTextField} label="Askee" /> 
     </div> 

     <div className="outcome"> 
      <Field name="outcome" component={renderSelectField} label="Outcome"> 
      <MenuItem value="Accepted" primaryText="Accepted" /> 
      <MenuItem value="Rejected" primaryText="Rejected" /> 
      </Field> 
     </div> 

     <RaisedButton label="Submit" type="submit" primary={true} /> 
     </form> 
    ) 
    } 
} 

export default reduxForm({ 
    form: 'MaterialUiForm' // a unique identifier for this form 
})(MaterialUiForm) 

Answer 1

我想通了！我忘了關閉<SelectField>。

此變量：

const renderSelectField = ({ input,label,children }) => (
    <SelectField 
     { ...input } 
     floatingLabelText={ label } 
     floatingLabelFixed={true} 
     value={this.state.outcome} 
     onChange={(event, index, value) => this.setState({outcome: value })}> 
     children={children} /> 
); 
) 

應該是：

const renderSelectField = ({ input,label,children }) => (
    <SelectField 
     { ...input } 
     floatingLabelText={ label } 
     floatingLabelFixed={true} 
     value={this.state.outcome} 
     onChange={(event, index, value) => this.setState({outcome: value })}> 
     children={children}> 
    </SelectField> 
); 
)