現在、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);
})();