reactjs - Reactjs+Flow:SyntheticKeyboardEvent 并将函数作为道具传递
问题描述
我有以下 AsyncApp.js 组件
AsyncApp.js
// @flow
import React from "react";
import { connect } from "react-redux";
import _ from "lodash";
import { fetchPastLaunchesRequest } from "../actions/launches";
import { LaunchList } from "../components/launches/LaunchList";
import { Picker } from "../components/Picker";
type Props = {
fetchPastLaunchesRequest: (launch_year: string) => Function,
launches: Array<Object>,
hasErrored: boolean,
isLoading: boolean
};
class AsyncApp extends React.Component<Props, void> {
componentDidMount() {
let launch_year = "";
this.props.fetchPastLaunchesRequest(launch_year);
}
handleOnChange = (e: SyntheticKeyboardEvent<HTMLInputElement>) => {
this.props.fetchPastLaunchesRequest(e.currentTarget.value);
};
render() {
const { launches, isLoading } = this.props;
let launchYears = _.range(2005, 2019);
return (
<div id="launches">
<Picker options={launchYears} onChange={this.handleOnChange} />
{isLoading && launches.length === 0 && <h2>Loading...</h2>}
{launches.length > 0 ? <LaunchList launches={launches} /> : <div />}
</div>
);
}
}
const mapDispatchToProps = (dispatch: *) => {
return {
fetchPastLaunchesRequest: launch_year =>
dispatch(fetchPastLaunchesRequest(launch_year))
};
};
const mapStateToProps = state => {
return {
launches: state.launches.items,
hasErrored: state.itemsHasErrored,
isLoading: state.itemsIsLoading
};
};
export default connect(mapStateToProps, mapDispatchToProps)(AsyncApp);
选择器.js
//@flow
import React from "react";
type PickerProps = {
options: Object,
onChange: (e: HTMLInputElement) => void
};
export const Picker = ({ options, onChange }: PickerProps) => {
return (
<span>
<select onChange={e => onChange(e)}>
<option defaultValue=" ">Pick Year</option>
{options.map(year => (
<option value={year} key={year}>
{year}
</option>
))}
</select>
</span>
);
};
我在 AsyncApp.js 组件中不断收到这种类型检查错误:
[flow] Cannot create `Picker` element because `SyntheticKeyboardEvent` [1] is incompatible with `HTMLSelectElement` [2] in the first argument of property `onChange`. (References: [1] [2])
(property) AsyncApp.handleOnChange: (e: any) => void
[Flow]
handleOnChange: (e: SyntheticKeyboardEvent < HTMLInputElement > ) => void
解决方案
将 onChange 的参数类型更改为HTMLInputElement
//@flow
import React from "react";
type PickerProps = {
options: Object,
onChange: (e: HTMLInputElement) => void
};
export const Picker = ({ options, onChange }: PickerProps) => {
return (
<span>
<select onChange={e => onChange(e)}>
<option defaultValue=" ">Pick Year</option>
{options.map(year => (
<option value={year} key={year}>
{year}
</option>
))}
</select>
</span>
);
};
推荐阅读
- asp.net-web-api - Automapper 多对多映射,包括连接表数据
- c# - JsonConvert.DeserializeObject 返回 null
- cassandra - 由于 Cassandra 后端墓碑异常导致 JanusGraph 查询失败
- java - Hibernate验证器从枚举设置消息而不是传递字符串
- css - 没有参数的@media 会做任何事情吗?
- android - 处理 Android 模式下的 svg 的 loadShape 失败
- python - NameError:名称'urllib'未定义
- csv - 从 CSV 文件导入关系
- javafx - 在JavaFX中更新两个文本对象,一个接着一个字段,只看到两个更改的最终结果
- kubernetes-helm - 如何使用内部服务 pod 之间的权重来路由流量以进行金丝雀发布?