反應 OnChange 傳遞 ID 或事件

Question

我想將文本字段的 id 和值傳遞給 onChange 事件的函數。

我嘗試了很多不同的東西，但我無法從 onChange 返回事件，因為它只傳遞值。

我的功能

    const handleFieldChange = (value: any, name: string) =>
    setFields({
        ...fields,
        [name]: value,
    });

還有我的文本框

<TextField id="test" label="Test" onChange={(event) => handleFieldChange(event, "test")} defaultValue="Test" />

因為“事件”只包含值而不是實際事件，我必須單獨傳遞 ID，我不能只做 onChange={handleFieldChange}

這似乎是一個丑陋的解決方案，因為我有數百個 TextField

Answer 1

考慮到您的event僅包含值而不包含實際事件，問題很可能依賴於您的 TextField 組件。 很可能 onChange 實現返回event.target.value而不僅僅是event 。

Answer 2

您可以訪問文本字段的 id 屬性而無需作為第二個參數傳遞

const handleFieldChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {id: name, value} = event.currentTarget;
    setFields({
        ...fields,
        [name]: value,
    });
}

HTML

<TextField 
    id="test" // IMP! This is used in the handler 
    label="Test" 
    onChange={handleFieldChange} 
    defaultValue="Test" 
/>