通過 function 作為 Reactjs 中的道具

Question

我試圖通過 function 作為道具。 我以前這樣做過，但現在使用相同的邏輯它給了我錯誤（this.props.functionName 不是函數）。 我有一個孩子（導航欄）和一個父組件（MainComponent）。 我想將輸入值從導航欄發送到 MainComponet，並將其設置為父組件中的 state 值。

父組件

    import React ,{Component}from 'react'
    import Navbar from '../Presentational/Navbar'

class Main extends Component{
constructor(props){
    super(props)
    this.state = {
        searchItem: ''
    }
}

GetSearchItem(search){
    this.setState({searchItem:search})
}
render(){
    return(
        <div className = 'container'>
            <div className = 'row'>
                <div className = 'col-12 mt-1'>
                    <Navbar onChange = {(search)=>this.GetSearchItem(search)}></Navbar>
                </div>
            </div>
            <div className = 'row'>
                <div className = 'col-3'>
                    <h3>{this.state.searchItem}</h3>
                </div>
            </div>
        </div>
    )
}
}

export default Main

子組件（導航欄）

import React,{Component} from 'react'
import {AppBar,Toolbar,IconButton,Typography,InputBase} from '@material-ui/core'
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import {fade , makeStyles} from '@material-ui/core/styles'

const useStyles = makeStyles((theme) => ({
root: {
  flexGrow: 1,
},
menuButton: {
  marginRight: theme.spacing(2),
},
title: {
  flexGrow: 1,
  display: 'none',
  [theme.breakpoints.up('sm')]: {
    display: 'block',
  },
},
search: {
  position: 'relative',
  borderRadius: theme.shape.borderRadius,
  backgroundColor: fade(theme.palette.common.white, 0.15),
  '&:hover': {
    backgroundColor: fade(theme.palette.common.white, 0.25),
  },
  marginLeft: 0,
  width: '100%',
  [theme.breakpoints.up('sm')]: {
    marginLeft: theme.spacing(1),
    width: 'auto',
  },
},
searchIcon: {
  padding: theme.spacing(0, 2),
  height: '100%',
  position: 'absolute',
  pointerEvents: 'none',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
},
inputRoot: {
  color: 'inherit',
},
inputInput: {
  padding: theme.spacing(1, 1, 1, 0),
  // vertical padding + font size from searchIcon
  paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
  transition: theme.transitions.create('width'),
  width: '100%',
  [theme.breakpoints.up('sm')]: {
    width: '12ch',
    '&:focus': {
      width: '20ch',
    },
  },
},
 }));

class Navbar extends Component{

render(){
    const classes  = this.props.classes;;
    return(
        <div className={classes.root}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton
                        edge="start"
                        className={classes.menuButton}
                        color="inherit"
                        aria-label="open drawer"
                    >
                        <MenuIcon />
                    </IconButton>
                    <Typography className={classes.title} variant="h6" noWrap>
                        Pizaa Valley
                    </Typography>
                    <div className={classes.search}>
                        <div className={classes.searchIcon}>
                        <SearchIcon />
                        </div>
                        <InputBase
                        placeholder="Search…"
                        classes={{
                            root: classes.inputRoot,
                            input: classes.inputInput,
                        }}
                        inputProps={{ 'aria-label': 'search' }}
                        onChange={(event)=>this.props.onChange(event.target.value)}
                        />
                    </div>
                </Toolbar>
            </AppBar>
        </div>
    )
}
}


export default () => {
const classes = useStyles();
return (
    <Navbar classes={classes} />
)
}

Answer 1

問題是您有兩種Navbar類型。 您首先擁有使用class Navbar創建的 class 組件。 其次，您在此處定義了以下功能組件：

export default () => {
const classes = useStyles();
return (
    <Navbar classes={classes} />
)
}

當你這樣做

import Navbar from '../Presentational/Navbar'

<Navbar onChange = {(search)=>this.GetSearchItem(search)}></Navbar>

onChange正確地提供給功能組件，但永遠不會傳遞給基於類的組件。 您可以通過使用以下代碼替換您的功能組件來解決此問題：

export default props => {
    const classes = useStyles();
    return (
        // using the "spread operator", we pass along all the props given
        // to the functional component, so the class-based component can 
        // also access these
        <Navbar {...props} classes={classes} />
    )
}

Answer 2

你已經正確地完成了所有的事情，除了改變這個：

GetSearchItem(search){
    this.setState({searchItem:search})
}

至

GetSearchItem = (search) => {
    this.setState({searchItem:search})
}

如箭頭 function 它可以訪問上面的 scope

Answer 3

嘗試以下方法：-

在您的父組件中修改了以下行：-

  <Navbar onChangeCallBack = {(search)=>this.GetSearchItem(search)}></Navbar>

在您的子導航欄組件中，僅修改了以下行：-

  onChange={(event)=>this.props.onChangeCallBack(event.target.value)}