4

現在、material-ui を試しています。私はreact.jsとmaterial-uiが初めてで、どうにかしていくつかのことをやり遂げましたが、SelectFieldを使用できません。SelectField コンポーネントを使用するたびに、

キャッチされていない TypeError: undefinederror のプロパティ 'toUpperCase' を読み取ることができません。

私はそれがどのように書かれているかに従っています: material-ui.com

これは私のselectField.jsxファイルです:

var React = require('react');
var mui = require('material-ui');
var SelectField = mui.SelectField;
var ThemeManager = new mui.Styles.ThemeManager();
var Colors = mui.Styles.Colors;
var StyleResizable = mui.Mixins.StyleResizable;

var menuItems = [
{ payload: '1', text: 'Never' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' },
];

var Main = React.createClass({

  getInitialState: function() {
    return { selectValue: undefined};
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext: function() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  },

  render: function() {
    return (
      <SelectField
      value={this.state.selectValue}
      onChange={this._handleSelectValueChange}
      floatingLabelText="Select Field"
      menuItems={menuItems} />
    );
  },

  _handleSelectValueChange: function(e) {
    this.setState({
      selectValue: e.target.value
    });
  }
});

module.exports = Main;

エラーを出力する理由はありますか? その他の material-ui コンポーネントは正常に動作します。

編集:

これはapp.jsxファイル内の私の親コンポーネントです:

(function () {
  var React = require('react');
  var injectTapEventPlugin = require('react-tap-event-plugin');
  var Main = require('./components/selectField.jsx'); 

  window.React = React;

  injectTapEventPlugin();

  React.render(<Main />, document.body);

})();
4

0 に答える 0