Question

我想制作一个应用栏，其中将包含一个 SearchBar 。为此，我在 React 中使用了 Material-UI 。

我的组件部分中有一个文件，该文件会加载 Appbar

这里是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，但没有得到任何控制台日志。

相反，我遇到了错误

无法读取appbar.js：46：29中未定义的属性'writeInput'

writeInput是我作为道具发送到Materila-UI组件的功能！

代码沙箱的链接在这里，您也可以检查输出。project's sandbox

ps。。沙箱可能要花一些时间才能启动！

那么，我不能将函数作为道具发送给Material-UI的组件吗？如果不是，解决此问题的替代方法是什么？

Answer 1

您可以将功能发送到功能组件并进行访问。调用writeInput时不要使用它。由于您要分配const {writeInput} = props;您必须致电writeInput，或者如果您没有这样分配，则可以致电props.writeInput

PFB更正的代码

[['Burgundy Bichon Frise' '1' '137']
['Pumpkin Pomeranian' '1' '182']
['Purple Puffin' '1' '125']
['Wisteria Wombat' '1' '109']
['Burgundy Bichon Frise' '2' '168']
['Pumpkin Pomeranian' '2' '141']
['Purple Puffin' '2' '143']
['Wisteria Wombat' '2' '167']
['Burgundy Bichon Frise' '3' '154']
['Pumpkin Pomeranian' '3' '175']
['Purple Puffin' '3' '128']
['Wisteria Wombat' '3' '167']]

如何将作为道具的功能传递给Material-UI for React的组件？

为什么我要这么做？

1 个答案: