call to onBlur gives TypeError: (destructured parameter) is undefined

Question

使用以下代码，onChange 工作正常，按预期打印一些内容到控制台。但是使用 onBlur 会出错：类型错误：（解构参数）未定义

这是为什么？

对我来说也很奇怪的是，如果我从函数中删除事件并只保留定义，例如： const handleValueChange = ({value}) => {

然后 onChange 打印值未定义

虽然它没有给出错误。事件到位后，它会按预期打印值测试[按下键添加]

但是在所有情况下，onBlur 都会给出关于解构参数未定义的错误

代码：

import React from 'react';
import { Form } from 'semantic-ui-react';

const Test = () => {

    const handleValueChange = (event, {value}) => {
        event.persist();

        console.log('value', value);
    };

    const handleBlur = async (event, {value}) => {
        event.persist();      

        console.log('value', value);
    };


    return (
        <Form name='testForm'>
            <Form.Field>
                <Form.Input
                    placeholder='Name'
                    label='Name'
                    name='name'
                    key='key'
                    value='test'
                    onChange={handleValueChange}
                    onBlur={handleBlur}
                />
            </Form.Field>
        </Form>
    );
}

export default Test;

Answer 1

onBlur只提供一个参数，即event。所以如果你想要像

这样的值，你会想要解构它

const handleBlur = async (event) => {
  const value = event.target.value;
  // OR
  // const { target: { value } } = event;
  event.persist();      

  console.log('value', value);
};

call to onBlur gives TypeError: (destructured parameter) is undefined

call to onBlur gives TypeError: (destructured parameter) is undefined

javascript

reactjs

semantic-ui-react