如何将函数作为道具传递给 React 的 Material-UI 组件？

Question

我想制作一个包含SearchBar的Appbar 。 为此，我将Material-UI用于React 。

我的组件部分中有一个加载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 组件的函数！

代码沙箱的链接在这里，你也可以查看输出。 项目的沙箱

附： 沙箱启动可能需要一些时间！

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

Answer 1

您可以将函数发送到功能组件并访问它。 调用 writeInput 时不要使用它。 由于您正在分配 const { writeInput} = props; 你必须调用 writeInput 或者如果你不这样分配那么你可以调用 props.writeInput

PFB 修正码

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