型別為'string'的引數不能分配給型別為'ChangeEvent<HTMLLIElement>'的引數。 -有解無憂

我剛剛開始學習typescript，所以我決定做一個自定義下拉選單，但是我遇到了這個問題。如何解決這個問題？

import React, { useState } from 'react, { useState }


const DropDown = (/span>) => {

    const platforms = ["Platform_1","Platform_2", "Platform_3"]

    const [drop, setDrop] = useState<boolean> (false)
    const [name, setName] = useState<string | null> ('All Platforms')

    const changeSelect = (e: React.ChangeEvent<HTMLLIElement> ) => {
        setName(e.target.textContent)
        setDrop(false)
    }

    return (
        <div>/span>
            <div className="過濾器">
                < div className="filter-name" onClick={（）/span> => setDrop（! drop)}>{name}</div> 

                {
                drop ? 
                <ul> { drop ?
                    {platforms.map((option) => 
                    <li onClick={e =>  changeSelect(option)}>{option}</li> 
                    )}
                </ul> )}</ul>  
                :
                空
                }
            </div> :null }
        </div>>
    )
}

export default DropDown

這里的錯誤

uj5u.com熱心網友回復：

這是因為你將字串陣列platforms中的字串傳遞給了changeSelect，它需要一個React.ChangeEvent<HTMLLIElement>型別的事件作為引數而不是字串。

另外，如果您要使用React.MouseEvent<HTMLLIElement>型別的事件，您應該使用onClick。根據你的編輯器，你可能會發現React期望的型別；例如在VSCode中按住Ctrl并懸停在onClick上會顯示(onClick? : MouseEventHandler<T>| undefined;在通常的工具提示之上，告訴你應該使用React.MouseEventHandler<T>，其中T是html元素。

下面是我對DropDown內的代碼的修改：

。

 const platforms = ["Platform_1"/span>, "Platform_2", "Platform_3"] 。

  const [drop, setDrop] = useState<boolean>(false)。
  const [name, setName] = useState<string | null> ("All Platforms");

  const changeSelect = (e: React. MouseEvent<HTMLLIElement>) => { //changed type of `e` to React.MouseEvent<HTMLLIElement> 
    setName(e.currentTarget.textContent); //從e.target改為e.currentTarget。
    setDrop(false)。
  };

  return (
    <div> 
      <div className="過濾器">
        < div className="filter-name" onClick={（）/span> =>  setDrop（! drop)}>
          {name}
        </div> 

        {drop ? (
          <ul> {drop ?
            {platforms.map((option) => (
              <li
                onClick={(e: React.MouseEvent<HTMLLIElement> ) => { //給`e`型別 
                  changeSelect(e)。
                }}
              >
                {option}
              </li>.
            ))}
          </ul>/span>
        ) : null}
      </div> ): null
    </div>/span>
  );

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/332484.html

標籤：

上一篇：ReactNative中的Typescript

下一篇：從遠程主機連接到Docker容器內的MongoRouter