将 Material-ui 中的 Select Field 与 Redux Form 一起使用时出错答案

【问题标题】：Error when using Select Field from Material-ui with Redux Form将 Material-ui 中的 Select Field 与 Redux Form 一起使用时出错
【发布时间】：2017-03-25 19:32:28
【问题描述】：

我抽象了 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)

【问题讨论】：

标签： javascript reactjs redux-form

【解决方案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>
  );
)

【讨论】：