Question

我有一个使用Material UI Beta的应用程序，我尝试按如下方式设置一个简单的组件：

import { MuiThemeProvider } from 'material-ui/styles';


const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: 200,
    marginRight: theme.spacing.unit,
    width: 200,
  },
  menu: {
    width: 200,
  },
});



export const CreateJob = (props) => {
  const { classes } = props;
  let confirmDelete = () => {
    const r = window.confirm("Confirm deletion of job");
    return r === true;
  };

  return (
    <MuiThemeProvider>
      <div>
        <form onSubmit={props.isEditting ? props.handleEdit : props.handleSubmit}  noValidate autoComplete="off">
          <h2>Update job details</h2>
          <TextField
            error={props.jobIdError !== ''}
            helperText={props.jobIdError || "Example: ES10"}
            autoFocus
            margin="dense"
            id="jobId"
            label="Job ID"
            name="jobid"
            fullWidth
            onChange={props.handleInputChange('jobId')}
            value={props.jobId} />
         </form>
       </div>
     </MultiThemeProvider>

然后我在我的父组件中使用它，如下所示：

<CreateJob open={this.state.open} />

然而，这会产生以下错误：

TypeError：无法读取属性＆＃39;类＆＃39;未定义的

Answer 1

this.state未在您的代码中定义。在示例中，state定义为

    state = {
    name: 'Cat in the Hat',
    age: '',
    multiline: 'Controlled',
    currency: 'EUR',
  };

Answer 2

抱歉，我有点迟到了，但是我在寻找其他解决方案时才发现了这个问题。

我假设您也导入了withStyles。

首先，您无需同时导出简单组件和增强组件：

export const CreateJob = props => {...} // lose the 'export'
export default withStyles(styles)(CreateJob); // only export here

第二，一个真正的问题：<MuiThemeProvider>应该放在最高组件（通常是在入口点文件中呈现的<App>组件）周围，因此您可以根据自己的喜好自定义默认主题对于整个应用程序；请参见他们的示例here。我不确定，但这可能甚至可以解决您的问题，因为那应该引发另一个issue这样的错误。

我只是希望这对某人有帮助，但是如果没有完整的组件文件，我不确定您的确切问题是什么。

WithStyles不在React的Material UI中工作

2 个答案: