onClick={OnButtomSubmit}函数在ReactJs中不工作

Question

我试图使用onClick作为React按钮，该按钮最初应该只打印控制台中单击的按钮，但不起作用。

调用它的组件是：

import React from 'react'
import 'tachyons'

const ImageLinkForm=({OnInputChange,OnButtomSubmit}) =>{
    return (
        <div>
            <div className="center mt5 form br3 shadow-5 w-50">
                <input className="f3 pa2 w-70 center" type="Text" onChange={OnInputChange}></input>
                <button className="w-30 f4 grow link ph3 pv2 dib white bg-black pointer ma1" onClick={OnButtomSubmit}>Detect</button>
            </div>
        </div>
    )
}

export default ImageLinkForm

该组件用于App.js，如下所示：

<ImageLinkForm OnInputChange={this.OnInputChange} OnButtonSubmit={this.OnButtonSubmit} ></ImageLinkForm>

这些职能的定义如下：

OnInputChange=(event)=>{
    console.log(event.target.value);
  }
OnButtonSubmit=()=>{
    console.log('clicked');
  }

我不知道我在这里错过了什么。PS: onInputChange运行良好

Answer 1

这只是一个错误：

OnButtomSubmit // change m to n

Answer 2

OnButtonSubmit=()=>{
    console.log('clicked');
  }

当你把它从道具里拿进来时，会有一个错误

const ImageLinkForm=({OnInputChange,OnButtomSubmit}) =>{ // you typed OnButtom with an m instead of an n

Answer 3

我认为这是错误的错误

<ImageLinkForm OnInputChange={this.OnInputChange} OnButtonSubmit={this.OnButtonSubmit} ></ImageLinkForm>

当您在组件文件中使用OnButtomSubmit作为支柱时，并且在使用该支柱时使用OnButtonSubmit。

希望这能帮上忙