简体   繁体   中英

Type '(e: React.ChangeEvent) => void' is not assignable to type 'ChangeEventHandler'

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文简体   中文繁体   中英对照 版本,有任何建议请联系yoyou2525@163.com。

When I try to call my setNewValue function inside a component on my form (using react-bootstrap ), I get the following error

Type '(e: React.ChangeEvent<HTMLFormElement>) => void' is not assignable to type 'ChangeEventHandler<FormControlElement>'.

I handle my function like this

import { useState } from 'react';
import Form from 'react-bootstrap/Form';
import { InventoryItemType } from '../../types/InventoryItemType';
import React from 'react';

export function InventoryItem({ cardID, inventoryItem }: { cardID: string, inventoryItem: InventoryItemType }) {
    const [value, setValue] = useState(inventoryItem != null ? inventoryItem.quantity : 0);
    const [valueChanged, setValueChanged] = useState(false);

    const setNewValue = (e: React.ChangeEvent<HTMLFormElement>) => {
        const value = e.currentTarget.value;
        if (value !== '') {
            const valueNumber = parseInt(value);
            if (!isNaN(valueNumber)) {
                setValue(valueNumber);
                setValueChanged(true);
            } else {
                setValue(inventoryItem != null ? inventoryItem.quantity : 0);
                setValueChanged(false);
            }
        } else {
            setValue(inventoryItem != null ? inventoryItem.quantity : 0);
            setValueChanged(false);
        }
    };

    return (
        <div className={'w-100'}>
            <div className={'d-flex w-100 justify-content-between align-items-center my-3'}>
                <Form onSubmit={setNewValue} className={'flex-shrink-10 mx-4'}>
                    <Form.Group className='mb-0' controlId='formBasicEmail'>
                        // Error appears in this line below
                        <Form.Control type='text' placeholder={value.toString()} onChange={setNewValue} />
                    </Form.Group>
                </Form>
            </div>
        </div>
    );
}

Does it have to do with the way I'm calling the function on my Form.Control tag? Since it does work just fine on my onSubmit attribute.

Any help is appreciated.

No answers.You can refer to the related questions on the right.
暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM