在反应中添加选择材料-ui答案

【问题标题】：Add a select material-ui in react在反应中添加选择材料-ui
【发布时间】：2016-01-26 16:24:31
【问题描述】：

伙计们，我正在材料 ui 中做一个 appp：

import React from 'react';
//Import statement:
import TextField from 'material-ui/lib/text-field';
import TimePicker from 'material-ui/lib/time-picker';
import DatePicker from 'material-ui/lib/date-picker/date-picker';
import SelectField from 'material-ui/lib/select-field';
import MenuItem from 'material-ui/lib/menus/menu-item';

const containerStyle = {
  textAlign: 'center',
  paddingTop: 200,
};

const Main = React.createClass({
    render: function(){
      return(
        <div>
        <CitySearch/>
        <CourseSelector/>
        <Dater/>
        <Matiere/>
        </div>
        );
    }
});

var CitySearch = React.createClass({
  render: function(){
    return(
      <div>
        <h1>Où ?</h1>
        <TextField
  hintText="Lieux" />
      </div>
      );
  }
});

var CourseSelector = React.createClass({

    render: function(){
      return(
          <div>
            <h1>Quand ?</h1>
            <TimePicker
  format="24hr"
  hintText="Début RDV" />
          </div>
        );
    }
});


var Dater = React.createClass({

    render: function(){
      return(
          <div>
            <h1>Quand mois ?</h1>
            <DatePicker
      hintText="Portrait Dialog" />
          </div>
        );
    }
});

var Matiere = React.createClass({

    render: function(){
      return(
          <div>
            <h1>Quand mois ?</h1>
            <SelectField value={1} disabled={false}>
    <MenuItem value={1} primaryText="Matière"/>
    <MenuItem value={2} primaryText="Français"/>
    <MenuItem value={3} primaryText="Allemand"/>
    <MenuItem value={4} primaryText="Maths"/>
    <MenuItem value={5} primaryText="Anglais"/>
    <MenuItem value={6} primaryText="Chimie"/>
  </SelectField>
          </div>
        );
    }
});

export default Main;

我想添加一个选择组件，问题是它使用导出和继承，我不知道如何将示例代码放入我的组件中。这里我得到了选择 http://www.material-ui.com/#/components/select-field 的代码

import React from 'react';
import SelectField from 'material-ui/lib/select-field';
import MenuItem from 'material-ui/lib/menus/menu-item';

export default class SelectorSubject extends React.Component {

  constructor(props) {
    super(props);
    this.state = {value: 2};
  }

  handleChange = (event, index, value) => this.setState({value});

  render() {
    return (
      <SelectField value={this.state.value} onChange={this.handleChange}>
        <MenuItem value={1} primaryText="Maths"/>
        <MenuItem value={2} primaryText="Anglais"/>
        <MenuItem value={3} primaryText="Chimie"/>
        <MenuItem value={4} primaryText="Physique"/>
        <MenuItem value={5} primaryText="Allemand"/>
      </SelectField>
    );
  }
}

非常感谢朋友

【问题讨论】：

您遇到错误了吗？
我粘贴的代码工作正常，但是当我尝试添加选择器时，handleChange = (event, index, value) => this.setState({value});我认为这是一个过时的语法？你觉得呢？
你刚才提到的有问题的代码在问题描述中没有提到。我建议用包含问题的代码更新问题
@lux 谢谢我已经更新了选择器代码，我感觉要在 main 中导入
啊，所以在 es6 类中使用“this”与 es5 有点不同。即React.createClass = es5，extends React.Component = es6。您可以同时使用两者，但请查看 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 的 lexical this 部分

标签： ecmascript-6 react-jsx material-ui

【解决方案1】：

问题是当你使用这种绑定符号时：

 handleChange = (event, index, value) => this.setState({value});

您必须在 Babel 中启用 transform-class-properties 或启用 stage-2。这是链接希望对你有帮助... enter link description here

【讨论】：