我正在 Typescript 中构建类似 这个 React 示例 的东西。目标是让父组件具有状态,并且它创建几个无状态子组件,将它们的点击传递回父组件。
由于示例是用 Javascript 编写的,我不知道输入框事件和 onChange 处理程序的类型是什么......?我尝试过多种选择,例如
React.MouseEvent<HTMLInputElement>
,但这只是猜测......
父组件 创建 imageRows 并传递处理程序:
render() {
<div>
<ImageRow key={el.url} onChange={this.onChange}/>
</div>
}
// what should the type of e be?
onChange(e:any){
}
还有 ImageRow 组件
export interface ImageRowProps {
genre: Array<number>
url: string
onChange : any // what is the type of the callback function?
}
export class ImageRow extends React.Component<ImageRowProps> {
render() {
return <div className="imagerow">
<input type="checkbox" key={index} onChange={this.props.onChange} defaultChecked={(num == 1)}/>
</div>
}
编辑
类似的问题仅显示事件类型,而不显示处理程序类型。当我更改事件类型时:
onChange(e: React.FormEvent<HTMLInputElement>){
console.log(e.target.value)
}
我收到此错误:
Property 'value' does not exist on type 'EventTarget'.
在我们的应用程序中,
console.log(event.target.value); // 不工作(空白值)
console.log(event.target.checked); // 工作正常(真/假)
//../src/components/testpage2/index.tsx
import * as React from 'react';
import { TestInput } from '@c2/component-library';
export default class extends React.Component<{}, {}> {
state = {
model: {
isUserLoggedIn: true
}
};
onInputCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
console.log(event.target.value); // Not Working
console.log(event.target.checked); // Working
const field = event.target.name;
const model = this.state.model;
model[field] = event.target.checked;
return this.setState({model: model});
};
render() {
return (
<div>
<TestInput
name="isUserLoggedIn"
label="Is User LoggedIn : "
type="checkbox"
onChange={this.onInputCheckboxChange}
/>
</div>
);
}
}
//=============================================================//
import * as React from 'react';
//import * as cs from 'classnames';
export interface TestInputProps extends React.HTMLAttributes<HTMLInputElement> {
name: string;
label: string;
onChange: React.ChangeEventHandler<HTMLInputElement>;
placeholder?: string;
value?: string;
type?: string;
error?: string;
className?: string;
}
export const TestInput : React.SFC<TestInputProps> = ({ name, label, onChange, placeholder, value, type, className, error, ...rest }) => {
let wrapperClass:string = 'form-group';
if (error && error.length > 0) {
wrapperClass += " " + 'has-error';
}
return (
<div className={wrapperClass}>
<label htmlFor={name}>{label}</label>
<div className="field">
<input
type={type}
name={name}
className="form-control"
placeholder={placeholder}
value={value}
onChange={onChange}
/>
{error && <div className="alert alert-danger">{error}</div>}
</div>
</div>
);
}
TestInput.defaultProps ={
type: "text"
}
您可以使用
BaseSyntheticEvent
作为事件类型,因为 React 中的所有 DOM 事件都不是原生的而是合成的。
render() {
<div>
<ImageRow key={el.url} onChange={this.onChange}/>
</div>
}
// BaseSyntheticEvent is better than 'any'
onChange(e:BaseSyntheticEvent){
}
如果将鼠标悬停在属性可用的类型上
onChange
和<input type="checkbox">
,您将看到React为您提供了第二个参数来获取复选框的选中状态。
您可以创建一个处理程序,该处理程序将接受当此输入的状态更改时由 React 调度的
ChangeEvent
事件,以及第二个参数,即该输入的检查状态。
import { ChangeEvent, useCallback } from "react";
const Main = () => {
const [checked, setChecked] = useState<boolean>(false);
const handleChecked = useCallback((changeEvent: ChangeEvent, checked: boolean): void => {
setChecked(checked);
}, []);
return (
<input
type="checkbox"
onChange={handleChecked} />
);
};
不幸的是,官方 React 文档中关于 TypeScript 类型的可用文档很少,但与每个库一样,可以使用受支持的文本编辑器深入研究类型。
你可以
export interface ImageRowProps extends React.InputHTMLAttributes<HTMLInputElement> {
然后您可以将传播的 props 直接扩展到输入。
就这样做:
onChange = (event: Event) => {
const { value } = event.target as unknown as { value: boolean, };
setState(value);
};
<input type='radio' onChange={this.onChange} />
刮刀线将会消失。