Реагировать на Dropbox с помощью Material-UI-Next - PullRequest
Новая
       44

Реагировать на Dropbox с помощью Material-UI-Next

0 голосов
/ 06 мая 2018

Есть ли способ вложить выпадающий компонент с MenuItem? Я хотел бы объявить один компонент всякий раз, когда мне нужно использовать раскрывающийся список вместо вложения двух. Я нахожусь на правильном пути или должны быть обработаны выпадающие компоненты иначе, чем обычные компоненты React?

App.js (в настоящее время это работает, вложив MenuItem в DropDown) 

<DropDown
  label="Drop Down Label"
  value={this.state.selectedState}
  onChange={this.handleChange}
>
  {stateAbbreviationData.map(option => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</DropDown>;

App.js (как я хотел бы использовать свой компонент, не работает) Показывает код (data.map(option => ( ))} ) вместо списка при нажатии. Дальнейший код ниже. 

<DropDown
  label="Drop Down Label"
  value={this.state.selectedState}
  onChange={this.handleChange}
  menuData="stateAbbreviationData"
  menuKey={stateAbbreviationData.value}
  menuValue={stateAbbreviationData.value}
  menuOptionLabel={stateAbbreviationData.label}
/>;

DropDown.js 

import React from "react";
import TextField from "material-ui/TextField";
import DropDownMenu from "./DropDownMenu";

const styles = {
  minWidth: 175
};

class DropDown extends React.Component {
  render() {
    return (
      <TextField
        select
        label={this.props.label}
        value={this.props.value}
        style={styles}
        onChange={this.props.onChange}
        margin="normal"
        InputLabelProps={{
          shrink: true
        }}
        menuData={this.props.menuData}
      >
        <DropDownMenu
          key={this.props.menuKey}
          value={this.props.menuValue}
          optionLabel={this.props.menuOptionLabel}
        />
      </TextField>
    );
  }
}
export default DropDown;

DropDownMenu.js 

import React from "react";
import MenuItem from "material-ui/Menu/MenuItem";

const styles = {
  minWidth: 175
};

class DropDownMenu extends React.Component {
  render() {
    return (
      <div>
        {this.props.menuData.map(option => (
          <MenuItem key={this.props.key} value={this.props.value}>
            {this.props.optionLabel}
          </MenuItem>
        ))}
      </div>
    );
  }
}

export default DropDownMenu;

StateAbbreviationData.js 

const stateAbbreviationData = [
  {
    value: "AL",
    label: "AL"
  },
  {
    value: "AK",
    label: "AK"
  }

  // ...
];

export default stateAbbreviationData;

1 Ответ

0 голосов
/ 22 мая 2018

Я думаю, что ваш первый пример - это тот, который вы хотите создать с помощью компонента DropDown. Попробуйте удалить DropDownMenu компонент и выполнить всю логику внутри DropDown: 

import React from "react";
import TextField from "material-ui/TextField";
import MenuItem from "material-ui/Menu/MenuItem";

const styles = {
  minWidth: 175
};

class DropDown extends React.Component {
  render() {
    return (
      <TextField
        select
        label={this.props.label}
        value={this.props.value}
        style={styles}
        onChange={this.props.onChange}
        margin="normal"
        InputLabelProps={{
          shrink: true
        }}
      >
        {this.props.menuData.map(option => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>
    );
  }
}

export default DropDown;

И тогда вы можете использовать его так, как вы хотите: 

<DropDown
  label="Drop Down Label"
  value={this.state.selectedState}
  onChange={this.handleChange}
  menuData={stateAbbreviationData} // <-- Put in braces
/>

Примечание: В интерфейсе Material я использовал компоненты MenuItem внутри компонента Select, а не компонент TextField, как вы это делаете: https://material -ui.com / демки / выбирает /

Была пара проблем с вашим существующим кодом, на которые я укажу.

Как я указывал выше, вам нужно передать данные stateAbbreviationData в подпорки DropDown компонента, используя фигурные скобки: 

<DropDown
  label="Drop Down Label"
  value={this.state.selectedState}
  onChange={this.handleChange}
  menuData={stateAbbreviationData} // <-- This change
  menuKey={stateAbbreviationData.value}
  menuValue={stateAbbreviationData.value}
  menuOptionLabel={stateAbbreviationData.label}
/>

Есть еще одна ошибка с настройкой реквизита menuKey, menuValue и manuOptionLabel. С включенным кодом кажется, что stateAbbreviationData является массивом объектов.

В реквизитах вы пытаетесь получить доступ к свойствам этого массива, которые не существуют: stateAbbreviationData.value и stateAbbreviationData.label. Объекты в массиве имеют эти биты, а сам массив - нет. 

<DropDown
  label="Drop Down Label"
  value={this.state.selectedState}
  onChange={this.handleChange}
  menuData={stateAbbreviationData}
  menuKey={stateAbbreviationData.value}  // <-- Doesn't exist
  menuValue={stateAbbreviationData.value} // <-- Doesn't exist
  menuOptionLabel={stateAbbreviationData.label}  // <-- Doesn't exist
/>

Также есть ошибка, когда вы передаете menuData компоненту TextField, но вместо этого вы должны передать его DropDownMenu.

Тем не менее, я рекомендую перейти к первому предложенному мною решению. Удачи!

...