Как передать функцию в качестве реквизита компоненту Material-UI для React? - PullRequest
Новая
       11

Как передать функцию в качестве реквизита компоненту Material-UI для React?

0 голосов
/ 13 октября 2018

Я хотел создать панель приложений , которая будет содержать Панель поиска .для этого я использовал Material-UI для React .

У меня в разделе компонент есть файл, который загружает Панель приложений

Вот appbar.js

function SearchAppBar(props) {
  const { classes, placeholder, writeInput } = props;

  return (
    <div className={classes.root}>
      <AppBar position="fixed">
        <Toolbar>
          <IconButton
            className={classes.menuButton}
            color="inherit"
            aria-label="Open drawer"
          >
            <MenuIcon />
          </IconButton>
          <Typography
            className={classes.title}
            variant="h6"
            color="inherit"
            noWrap
          >
            My Weather
          </Typography>
          <div className={classes.grow} />
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder={placeholder}
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput
              }}
              onChange={this.writeInput}
            />
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}

SearchAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
  placeholder: PropTypes.string,
  writeInput: PropTypes.func
};

export default withStyles(style_appbar)(SearchAppBar);

После этого я импортировал этот файл в другой файл с именем searchbar.js.

Почему я это сделал?

Хорошо, так что я могу управлять вводом с помощью состояния компонента и реквизит

Вот searchcbar.js

import React, { Component } from "react";
import AppBar from "./appbar";

export default class Search extends Component {
  constructor(props) {
    super(props);

    this.state = { term: "" };
    this.onInputChange = this.onInputChange.bind(this);
  }

  onInputChange(event) {
    console.log(event.target.value);
    this.setState({ term: event.target.value });
  }

  render() {
    return (
      <AppBar
        placeholder="Search forecast for your favorite cities..."
        value={this.state.term}
        writeInput={this.onInputChange}
      />
    );
  }
}

А потом я импортировал этот файл в свой app.js.

Прежде чем углубиться в глубину, я хотел посмотреть, все ли работает, поэтому я поставил console log, но я не получаю консольный журнал .

Скорее у меня ошибка,

Невозможно прочитать свойство 'writeInput' undefined в appbar.js: 46: 29

writeInput - это функция, которую я отправлял компоненту Materila-UI в качестве реквизита!

Ссылка песочницы кода здесь, вы также можете проверить вывод. песочница проекта

пс. Это может занятьнекоторое время для песочницы тo загрузиться!

Итак, я не могу отправить функцию в качестве реквизита для компонента Material-UI?Если нет, то какой альтернативный способ решить эту проблему?

1 Ответ

0 голосов
/ 13 октября 2018

Вы можете отправить функцию на функциональный компонент и получить к ней доступ.Не используйте это при вызове writeInput.Так как вы назначаете const {writeInput} = props;Вы должны вызвать writeInput или, если вы не назначаете подобное, вы можете вызвать props.writeInput

PFB-исправленный код 

 <InputBase
          placeholder={placeholder}
          classes={{
            root: classes.inputRoot,
            input: classes.inputInput
          }}
          onChange={writeInput}
        />
...