Question

我正在尝试从material-ui实现SuperSelectField，但是当我尝试使用它时得到了TypeError Cannot read property 'baseTheme' of undefined。

我已经在网上搜索了有关如何解决此问题的方法，但没有得到任何好的解决方案。我还搜索了代码中没有“ baseTheme”这样的词。

import React, { Component } from "react";
import SuperSelectField from "material-ui-superselectfield";
import Toggle from "material-ui/Toggle";

const containerStyle = {
  padding: 40,
  paddingBottom: 0,
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  height: "calc(100% - 40px)"
};

const displayState = state =>
  state && state.value ? state.label || state.value : "empty state";

class CodeExample extends Component {
  state = {
    state11: null,
    state12: { value: "E", label: "label E" },
    floatingLabelState: null
  };

  handleSelection = (values, name) => this.setState({ [name]: values });

  handleDisable = (event, isDisabled) => this.setState({ isDisabled });

  handlePlaceholder = (event, withPlaceholder) =>
    this.setState({ withPlaceholder });

  render() {
    const {
      state11,
      state12,
      floatingLabelState,
      isDisabled,
      withPlaceholder
    } = this.state;

    // eslint-disable-next-line no-console
    console.debug(
      "state11",
      state11,
      "\nstate12",
      state12,
      "\nfloatingLabelState",
      floatingLabelState
    );

    return (
      <section style={containerStyle}>
        <fieldset style={{ marginBottom: 40 }}>
          <legend>Selected values</legend>
          <div>State 11: {displayState(state11)}</div>
          <div>State 12: {displayState(state12)}</div>
          <div>State floatingLabel: {displayState(floatingLabelState)}</div>
        </fieldset>

        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: "space-between"
          }}
        >
          <SuperSelectField
            name="state11"
            hintText="Single value"
            value={state11}
            onChange={this.handleSelection}
            style={{ minWidth: 150, margin: 10 }}
          >
            <div value="A">Option A</div>
            <div value="B">Option B</div>
            <div value="C">Option C</div>
          </SuperSelectField>

          <SuperSelectField
            name="state12"
            hintText="With labels"
            value={state12}
            onChange={this.handleSelection}
            style={{ minWidth: 150, margin: 10 }}
          >
            <div value="D" label="label D">
              Option D
            </div>
            <div value="E" label="label E">
              Option E
            </div>
            <div value="F" label="label F">
              Option F
            </div>
          </SuperSelectField>
        </div>

        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: "space-between",
            marginTop: 40
          }}
        >
          <article style={{ marginRight: 20 }}>
            <SuperSelectField
              name="floatingLabelState"
              floatingLabel="Floating label"
              hintText={`${withPlaceholder ? "Some hint text" : ""}`}
              value={floatingLabelState}
              onChange={this.handleSelection}
              style={{ minWidth: 150, margin: 10 }}
            >
              <div value="A">Option A</div>
              <div value="B">Option B</div>
              <div value="C">Option C</div>
            </SuperSelectField>
            <Toggle
              label="with Hint Text"
              toggled={withPlaceholder}
              onToggle={this.handlePlaceholder}
              style={{ margin: 10 }}
            />
          </article>

          <article>
            <SuperSelectField
              name="Disabled select"
              disabled={isDisabled}
              floatingLabel={`${isDisabled ? "Disabled" : "Active"} select`}
              value={{ value: "Preserved value" }}
              style={{ minWidth: 150, margin: 10 }}
            />
            <Toggle
              label="Disable"
              toggled={isDisabled}
              onToggle={this.handleDisable}
              style={{ margin: 10 }}
            />
          </article>
        </div>

        <div style={{ flex: 1 }} />

        <h3>Edges cases</h3>
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: "space-between"
          }}
        >
          <SuperSelectField
            name="case 1"
            hintText="No child"
            style={{ margin: 10 }}
          />

          <SuperSelectField
            name="case 2"
            hintText="Single child"
            style={{ margin: 10 }}
          >
            <span value={1} label="Option 1">
              Option 1
            </span>
          </SuperSelectField>

          <SuperSelectField
            name="case 2bis"
            hintText="Error message"
            errorText="Error text warning something is wrong!"
            style={{ margin: 10 }}
          >
            <span value={1} label="Option 1">
              Option 1
            </span>
          </SuperSelectField>

          <SuperSelectField
            name="case 3"
            hintText="Single empty group"
            style={{ margin: 10 }}
          >
            <optgroup label="Group A" />
          </SuperSelectField>

          <SuperSelectField
            name="case 4"
            hintText="Multiple empty groups"
            style={{ margin: 10 }}
          >
            <optgroup label="Group A" />
            <optgroup label="Group B" />
          </SuperSelectField>

          <SuperSelectField
            name="case 4bis"
            hintText="One empty group, and one group+child"
            style={{ margin: 10 }}
          >
            <optgroup label="Group A" />
            <optgroup label="Group B">
              <span value={1} label="Option 1">
                Option 1
              </span>
            </optgroup>
          </SuperSelectField>

          <SuperSelectField
            name="case 5"
            multiple
            value={[]}
            hintText="Single child in single group"
            style={{ margin: 10 }}
          >
            <optgroup label="Group A">
              <span value={1} label="Option 1">
                Option 1
              </span>
            </optgroup>
          </SuperSelectField>

          <SuperSelectField
            name="case 6"
            multiple
            value={[]}
            hintText="Children in single group"
            style={{ margin: 10 }}
          >
            <optgroup label="Group A">
              <span value={1} label="Option 1">
                Option 1
              </span>
              <span value={2} label="Option 2">
                Option 2
              </span>
            </optgroup>
          </SuperSelectField>
        </div>
      </section>
    );
  }
}

export default CodeExample;

以下是具有所需环境的代码： https://codesandbox.io/s/8kwwn641k9

Answer 1

这对我有用：

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

然后将整个代码包装在内：

<MuiThemeProvider >
  //your Code
</MuiThemeProvider >

TypeError无法读取未定义的属性“ baseTheme”

1 个答案: