Reactjs 无法将父函数传递给子组件

使用StackOverflow的信息，我尝试通过道具将父函数传递给子组件；但是，在这样做时，我总是会遇到错误。为了简化，这里是我的父函数：

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      dailyPreloadMetrics: null,
      queryResults: [0,0],
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

   handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  onClick(event) {
    const value = event.target.value;
    this.setState({isHidden: true});
    fetch('http://localhost:5000/kw-finder', {
      method: 'POST',
      headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
      body: JSON.stringify({'firstParam': event.target.value,
                            'secondParam' : 300000})
    }).then(response => {
        console.log(response)
        return response.json()
      })
      .then(json => {
        console.log(json)
        this.setState({queryResults: JSON.parse(json['query_results']),
                       dailyPreloadMetrics: JSON.parse(json['keyword_data']),
                       })
      })
  }


  render() {
    return (
      <div className="App">
      <QueryResultButtons data={this.state.queryResults}
                          onClick={this.onClick}
                          />
      </div>
    )
  }
}

export default App

<DynamicButton data={this.props.data && this.props.data}/>

类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
dailyPreloadMetrics:null，
查询结果：[0,0]，
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
}
onClick（事件）{
常量值=event.target.value；
this.setState（{ishiden:true}）；
取（'http://localhost:5000/kw-查找者'{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（{'firstParam'：event.target.value，
“secondParam”：300000}）
})。然后（响应=>{
console.log（响应）
返回response.json（）
})
。然后（json=>{
console.log（json）
this.setState（{queryResults:JSON.parse（JSON['query_results']），
DailyPrelodMetrics:JSON.parse（JSON['keyword_data']），
})
})
}
render（）{
返回(
)
}
}
导出默认应用程序

我的子组件如下所示：

class DynamicButton extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      secondParam: this.props.audienceMax
      }
  }


  render() {
    const {
      data
    } = this.props
    const row = this.props.data && data.map((data) =>
        <Button style={{margin: "10px"}}
                value={data}
               onClick={e => this.props.onClick(e)}
                name='value'
                >
        </Button>

        )
    return (row)
  }
}

class QueryResultButtons extends React.Component {
  render() {
    return (
               <div>
                  <h1>Did you mean any of these instead?</h1>
                  <DynamicButton data={this.props.data && this.props.data}/>
              </div>
    )
}
}

export default QueryResultButtons

类DynamicButton扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
第二个参数：this.props.audencemax
}
}
render（）{
常数{
数据
}=这是道具
const row=this.props.data&&data.map（（数据）=>
this.props.onClick（e）}
name='value'
>
)
返回（行）
}
}
类QueryResultButtons扩展React.Component{
render（）{
返回(
你是说这些吗？
)
}
}
导出默认QueryResultButtons

---

基本上，我试图将一个函数-

onClick

-从父组件传递到两级子组件（向下传递到DynamicButton子组件）。但是，当我尝试此操作时，会收到一条错误消息，指出：_this3.props.onClick不是函数。似乎子组件没有拾取父函数，但不确定我在这里做错了什么…

当您插入

QueryResultButtons

组件时，您正在传递

onClick

函数，如

onClick={this.onClick}

但是当您调用

动态按钮时，您没有传递
onClick
函数：

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      dailyPreloadMetrics: null,
      queryResults: [0,0],
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

   handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  onClick(event) {
    const value = event.target.value;
    this.setState({isHidden: true});
    fetch('http://localhost:5000/kw-finder', {
      method: 'POST',
      headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
      body: JSON.stringify({'firstParam': event.target.value,
                            'secondParam' : 300000})
    }).then(response => {
        console.log(response)
        return response.json()
      })
      .then(json => {
        console.log(json)
        this.setState({queryResults: JSON.parse(json['query_results']),
                       dailyPreloadMetrics: JSON.parse(json['keyword_data']),
                       })
      })
  }


  render() {
    return (
      <div className="App">
      <QueryResultButtons data={this.state.queryResults}
                          onClick={this.onClick}
                          />
      </div>
    )
  }
}

export default App

<DynamicButton data={this.props.data && this.props.data}/>

插入
QueryResultButtons
组件时，传递的是
onClick
函数，如
onClick={this.onClick}
，但调用
DynamicButton
时，没有传递
onClick
函数：

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      dailyPreloadMetrics: null,
      queryResults: [0,0],
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

   handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  onClick(event) {
    const value = event.target.value;
    this.setState({isHidden: true});
    fetch('http://localhost:5000/kw-finder', {
      method: 'POST',
      headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
      body: JSON.stringify({'firstParam': event.target.value,
                            'secondParam' : 300000})
    }).then(response => {
        console.log(response)
        return response.json()
      })
      .then(json => {
        console.log(json)
        this.setState({queryResults: JSON.parse(json['query_results']),
                       dailyPreloadMetrics: JSON.parse(json['keyword_data']),
                       })
      })
  }


  render() {
    return (
      <div className="App">
      <QueryResultButtons data={this.state.queryResults}
                          onClick={this.onClick}
                          />
      </div>
    )
  }
}

export default App

<DynamicButton data={this.props.data && this.props.data}/>

DynamicButton
组件不是
App
组件的直接子组件，它是孙子。因此，您还必须将
onClick
函数从子组件（
QueryResultButtons
）传递到子组件（
DynamicButton
）

因此，将您的
QueryResultButtons
替换为：

class QueryResultButtons extends React.Component {
  render() {
    return (
      <div>
        <h1>Did you mean any of these instead?</h1>
        <DynamicButton
          data={this.props.data && this.props.data}
          onClick={this.props.onClick}
        />
      </div>
    );
  }
}

类QueryResultButtons扩展React.Component{
render（）{
返回(
你是说这些吗？
);
}
}
DynamicButton
组件不是
App
组件的直接子组件，它是孙子。因此，您还必须将
onClick
函数从子组件（
QueryResultButtons
）传递到子组件（
DynamicButton
）

因此，将您的
QueryResultButtons
替换为：

class QueryResultButtons extends React.Component {
  render() {
    return (
      <div>
        <h1>Did you mean any of these instead?</h1>
        <DynamicButton
          data={this.props.data && this.props.data}
          onClick={this.props.onClick}
        />
      </div>
    );
  }
}

类QueryResultButtons扩展React.Component{
render（）{
返回(
你是说这些吗？
);
}
}