调用 onBlur 给出 TypeError: (destructured parameter) is undefined答案

【问题标题】：call to onBlur gives TypeError: (destructured parameter) is undefined调用 onBlur 给出 TypeError: (destructured parameter) is undefined
【发布时间】：2020-06-05 07:22:01
【问题描述】：

使用以下代码，onChange 可以正常工作，按预期将内容打印到控制台。但是使用 onBlur 会出错： TypeError: (destructured parameter) is undefined

这是为什么呢？

对我来说也很奇怪，如果我从函数中删除事件并仅保留定义，例如： 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;

【问题讨论】：

标签： javascript reactjs semantic-ui-react

【解决方案1】：

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

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

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

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

【讨论】：