Почему Flow ругается на передачу функции компоненту?

Question

[Nikita Shchypylov]

Добрый вечер.
Есть такой компонент :

// @flow

import * as React from "react";
import { connect } from "react-redux";
import { searchAction, changeMode } from "../../actions";
import SearchForm from "../../presentational/SearchForm";

type State = {
	inputValue: string
};

type Props = {
	searchAction: (inputValue?: string) => mixed,
	changeMode: (val?: string) => mixed
};

class Search extends React.Component<Props, State> {
	constructor(props: Props) {
		super(props);
		this.state = {
			inputValue: ""
		};
	}

	handleSubmit = (e: SyntheticEvent<>) => {
		e.preventDefault();
		let { inputValue } = this.state;
		this.props.searchAction(inputValue);
	};

	handleRadioChange = (e: SyntheticInputEvent<>) => {
		this.props.changeMode(e.target.value);
	};

	inputHandle = (e: SyntheticInputEvent<>) => {
		this.setState({ inputValue: e.target.value });
	};

	render() {
		return (
			<SearchForm
				title="NASA Search"
				inputHandle={this.inputHandle}
				radioChangeHandle={this.handleRadioChange}
				submitHandle={this.handleSubmit}
			/>
		);
	}
}

function mapStateToProps(state) {
	return {};
}

const mapDispatchToProps = {
	searchAction,
	changeMode
};

export default connect(mapStateToProps, mapDispatchToProps)(Search);

Ошибки возникают в трех местах :

inputHandle={this.inputHandle}
				radioChangeHandle={this.handleRadioChange}
				submitHandle={this.handleSubmit}

Код :
Cannot create `SearchForm` element because `SyntheticInputEvent` [1] is incompatible with string [2] in the first argument of property `inputHandle`.
Как это по-фиксить?

UPD: SearchForm.js :

//@flow

import React from "react";

type Props = {
	title: string,
	inputHandle: (value: string) => mixed,
	radioChangeHandle: (value: string) => mixed,
	submitHandle: (value: string) => mixed
};

const SearchForm = ({
	title,
	inputHandle,
	radioChangeHandle,
	submitHandle
}: Props) => {
	return (
		<div>
			<h1>{title}</h1>
			<form action="#" id="search-form">
				<input type="text" id="searchInput" onChange={inputHandle} />
				<input
					type="radio"
					name="radio-button"
					value="image"
					defaultChecked={true}
					onChange={radioChangeHandle}
				/>{" "}
				Image
				<input
					type="radio"
					name="radio-button"
					value="video"
					onChange={radioChangeHandle}
				/>{" "}
				Video
				<input type="submit" value="Go" onClick={submitHandle} />
			</form>
		</div>
	);
};

export default SearchForm;

GITHUB

Comments

[Максим]

Nikita Shchypylov похоже, что проблема не в этом коде, а в searchForm(?), добавьте еще его в вопрос (или лучше минимальный пример на гитхаб)

Answer 1

[Максим]

В добавок к коментарию, попробуйте еще так: SyntheticInputEvent<HTMLInputElement>

Comments

[Nikita Shchypylov]

Добавил компонент и ссылку на гитхаб

[Nikita Shchypylov]

Нет, все равно ругается на string.

[Nikita Shchypylov]

Решение :

type Props = {
	title: string,
	inputHandle: (value: SyntheticInputEvent<>) => mixed,
	radioChangeHandle: (value: SyntheticInputEvent<>) => mixed,
	submitHandle: (value: SyntheticEvent<>) => mixed
};

Обновил пропсы в SearchForm.js

[Максим]

Nikita Shchypylov, гуд! Flow тот еще "зверь", но если приручить, будет прекрасно.

[Nikita Shchypylov]

Максим, Ну, или останусь без руки :)

Answer 2

[Nikita Shchypylov]

Решение :

type Props = {
  title: string,
  inputHandle: (value: SyntheticInputEvent<>) => mixed,
  radioChangeHandle: (value: SyntheticInputEvent<>) => mixed,
  submitHandle: (value: SyntheticEvent<>) => mixed
};

Обновил пропсы в SearchForm.js