javascript - 了解Typescript中的React EventHandlers(Understanding React EventHandlers in Typescript)

Question

I am a Java programmer, trying to learn ReactJS using Typescript.

(我是一名Java程序员，试图使用Typescript学习ReactJS。)

I am following an i ntroductory tutorial on React/Typescript and got stuck understanding the EventHandler types for different user actions.

(我正在关注有关React / Typescript的入门教程，并且对了解不同用户操作的EventHandler类型一无所知 。)

Here's an input field with EventHandler , that's a function updateUserText that takes accepts an Event and returns nothing.

(这是EventHandler的输入字段，它是一个updateUserText函数，该函数接受一个Event updateUserText返回任何内容。)

<input value={userText} onChange={updateUserText}/>

const updateUserText = event => {
   setUserText(event.target.value);
}

Here's a button with EventHandler that's a function chooseSnippet that take a function that accepts an Event and returns another function.

(这是带有EventHandler的按钮，它是一个函数chooseSnippet ，它接受一个接受Event并返回另一个函数的函数。)

<button onClick={chooseSnippet(2)}/>

const chooseSnippet = snippetIndex => () => {
  setSnippet(SNIPPETS[snippetIndex]);
};

For a beginner like me, it's difficult to understand what "type" is expected as a handler for different events.

(对于像我这样的初学者来说，很难理解作为不同事件处理程序的“类型”。)

How does one know that onClick requires returning another function, while onChange does not?

(如何知道onClick需要返回另一种功能，而onChange却不需要？)

Looking at the function definition is not helping me.

(查看函数定义对我没有帮助。)

onChange?: ChangeEventHandler<T>;
onClick?: MouseEventHandler<T>;
type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>;
type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
interface ChangeEvent<T = Element> extends SyntheticEvent<T> 
interface MouseEvent<T = Element, E = NativeMouseEvent> extends SyntheticEvent<T, E>
type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"];

  ask by Gamer translate from so

Answer 1

等待大神答复