onClick 函数在 reactJS 输入组件中不起作用

Question

这是我的输入组件，当我在另一个组件中调用它时。但是 onClick 函数在那里不起作用。请提供任何解决方案。

这是输入组件

import React, { InputHTMLAttributes } from 'react'
import { FormControl } from 'react-bootstrap';
import './input.css';
import clsx from 'clsx';

  interface Input extends InputHTMLAttributes<HTMLInputElement>{
   half: boolean,
   lableText: string,
   typeOfInput: string,
   garyBold?:boolean
   value?:any
   placeholder?:string
}

 const InputField = ({half, lableText, typeOfInput, garyBold,value, placeholder}: 
  Input) => {
    return (
    <div className = {half ? "halfWidth" : "fullWidth"} >
        <label className={garyBold ? "grayBold" : ''}>{lableText}</label>
        <FormControl
        defaultValue={value ? value :''}
        required
        type={typeOfInput}
        className={clsx('mb-1 inputItself')}
        aria-label="Recipient's username"
        aria-describedby="basic-addon2"
        placeholder={placeholder}
        />
     </div>
     )
  }

  export default InputField

我在这里调用我的函数(Login.tsx)

 <InputField onChange={()=> console.log('ok')} typeOfInput='text' half={false} lableText={"Email Address/ Username"}/>

但是控制台没有任何显示。如果您知道答案，请提供帮助。将不胜感激。

Answer 1

它没有触发的原因是你没有给它一个 onChange 道具。自定义组件没有您可以使用的相同内在挂钩，因此您需要自己传递它们。

看看这个...


import React, { InputHTMLAttributes } from 'react'
import { FormControl } from 'react-bootstrap';
import './input.css';
import clsx from 'clsx';

  interface Input extends InputHTMLAttributes<HTMLInputElement>{
   half: boolean,
   lableText: string,
   typeOfInput: string,
   garyBold?:boolean
   value?:any
   placeholder?:string,
   onChange: () => void, // I added this
}

 const InputField = ({half, lableText, typeOfInput, garyBold,value, placeholder, onChange}: // And this
  Input) => {
    return (
    <div className = {half ? "halfWidth" : "fullWidth"} >
        <label className={garyBold ? "grayBold" : ''}>{lableText}</label>
        <FormControl
        defaultValue={value ? value :''}
        required
        type={typeOfInput}
        className={clsx('mb-1 inputItself')}
        aria-label="Recipient's username"
        aria-describedby="basic-addon2"
        placeholder={placeholder}
        onChange={onChange} // And this
        />
     </div>
     )
  }

  export default InputField

onClick 函数在 reactJS 输入组件中不起作用

onClick function is not working in reactJS input component

typescript

reactjs

react-bootstrap

react-functional-component