Reactjs不允许在onClick中传递函数答案

【问题标题】：Reactjs not allowing a function to be passed in onClickReactjs不允许在onClick中传递函数
【发布时间】：2017-12-25 15:06:51
【问题描述】：

单击按钮时，我正在尝试从 ajax 函数登录到 console.log。当我点击按钮时没有任何反应。

var Search = () => (

  var ajax() {
        console.log('ajax')
   }

return (
  <div className="search-bar form-inline">
    <input className="form-control" type="text" />
    <button className="btn hidden-sm-down" onClick={() => ajax()} >
      <span className="glyphicon glyphicon-search"></span>
    </button>
  </div> 
)
}

【问题讨论】：

发布的代码格式不正确 - 将其放入 babel 会显示一堆错误。
这种问题不值得回答

标签： javascript reactjs

【解决方案1】：

你的语法不正确，

你应该有：

var Search = () => {

   const ajax = () => {
        console.log('ajax')
   }

return (
  <div className="search-bar form-inline">
    <input className="form-control" type="text" />
    <button className="btn hidden-sm-down" onClick={() => ajax()} >
      <span className="glyphicon glyphicon-search"></span>
    </button>
  </div> 
)
}

或

var Search = () => {

   function ajax() {
        console.log('ajax')
   }

return (
  <div className="search-bar form-inline">
    <input className="form-control" type="text" />
    <button className="btn hidden-sm-down" onClick={() => ajax()} >
      <span className="glyphicon glyphicon-search"></span>
    </button>
  </div> 
)
}

ReactDOM.render(<Search/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></app>

【讨论】：

是的，澄清一下。您的函数左括号实际上是一个括号，并且您的函数实例化缺少实例化语法