小编Inv*_*e_Q的帖子

我正在尝试构建一个带有提供建议的下拉菜单的输入。我有一个使用 onBlur 的输入元素，从技术上讲，当单击外部时将删除 ul 元素。当我单击 ul 元素时，它还会删除 ul 元素，从而在输入上触发 onBlur 事件。有没有办法实现 onBlur 来防止 ul 元素触发 onBlur 事件？

import React, { useState, useEffect, useRef } from "react";

import "./styles.css";

const Autocomplete = (props) => {
  const [userInput, setUserInput] = useState("");

  const [listResults, setListResults] = useState([]);

  const [openModal, setOpenModal] = useState(false);

  useEffect(() => {
    const filteredResults = props.options.filter((option) =>
      option.includes(userInput)
    );

    setListResults(filteredResults);
  }, [userInput, props.options]);

  const handleInput = (event) => {
    setUserInput(event.target.value);
  };

  const handleInputClick = () => {
    setOpenModal(!openModal);
  };

  const …

我有以下问题

const imageSrc = webcamRef.current.getScreenshot();

错误：对象可能为“null”；

和 src={imgSrc}

<img src={imgSrc} />

错误：类型“null”不可分配给类型“string |” undefined'.ts(2322) index.d.ts(2053, 9)：预期类型来自属性“src”，该属性在类型“DetailedHTMLProps<ImgHTMLAttributes, HTMLImageElement>”上声明

完整代码如下：

import React, { createRef, useRef, useState } from "react";
import Webcam from "react-webcam";

const WebcamCapture = () => {
    const webcamRef = useRef(null);
    const [imgSrc, setImgSrc] = useState(null);

    const capture = React.useCallback(() => {
        const imageSrc = webcamRef.current.getScreenshot();
        setImgSrc(imageSrc);
    }, [webcamRef, setImgSrc]);

    return (
        <>
            <Webcam
                audio={false}
                ref={webcamRef}
                screenshotFormat="image/jpeg"
            />
            <button onClick={capture}>Capture photo</button>
            {imgSrc && (
                <img
                    src={imgSrc}
                />
            )}
        </>
    ); …