下面是我的代碼。
const [enteredAge, setEnteredAge] = useState<number | "">("");
已將 useState 的型別定義為數字。有一個 like 型別<number | undefined>是有意義的，我們將型別定義為numberor undefined。但是在上面給出的代碼中，我是這樣定義的<number|"">。這是否意味著只能useState以""這種方式定義的初始狀態？
uj5u.com熱心網友回復：
隨著useState<number | "">("");你的狀態將被初始設定為""，然后可以被設定為一個數字或“”再而不是任何其他字串。
你也可以useState<number | "">(42);用同樣的方式將它初始化為一個數字。
const [state, setState] = useState<number | "">("");
const [stateNum, setStateNum] = useState<number | "">(42);
setState("Foo"); // Error: Argument of type '"Foo"' is not assignable to parameter of type 'SetStateAction<number | "">'.ts(2345)
setState(0); // OK
setState(""); // OK
uj5u.com熱心網友回復：
如果用于保存受控數字輸入的值，請不要將其存盤在單個狀態變數中——而是將用戶輸入存盤為原始字串值，并為決議的數字型別使用單獨的狀態值。通過這樣做，您將永遠不會以意外的方式修改用戶輸入（例如：嘗試1e6在下面的代碼示例中輸入輸入并查看它是如何決議為數值的：
TS 游樂場鏈接
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script><script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script><script>Babel.registerPreset('tsx', {presets: [[Babel.availablePresets['typescript'], {allExtensions: true, isTSX: true}]]});</script>
<script type="text/babel" data-type="module" data-presets="tsx,react">
/**
* The following line is here because this Stack Overflow snippet uses the
* UMD module for React. In your code, you'd use the commented `import` lines
* below it.
*/
const {useEffect, useState} = React;
// import ReactDOM from 'react-dom';
// import {default as React, Dispatch, ReactElement, SetStateAction, useEffect, useState} from 'react';
type NumberParsingFunction = (input: string) => number;
type NumericInputData = {
rawValue: string;
setRawValue: Dispatch<SetStateAction<string>>;
value: number;
};
const defaultNumberParsingFunction: NumberParsingFunction = str => Number(str);
function useNumericInput (parseFn: NumberParsingFunction = defaultNumberParsingFunction): NumericInputData {
const [rawValue, setRawValue] = useState('');
const [value, setValue] = useState(parseFn(rawValue));
useEffect(() => setValue(parseFn(rawValue)), [rawValue, setValue]);
return {rawValue, setRawValue, value};
}
function Example (): ReactElement {
const {rawValue, setRawValue, value} = useNumericInput();
useEffect(() => console.log({rawValue, value}));
return (<input type="number" onChange={ev => setRawValue(ev.target.value)} value={rawValue} />);
}
ReactDOM.render(<Example />, document.getElementById('root'));
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/372385.html
標籤：javascript 反应 打字稿 类型 使用状态
上一篇：獲取redux的狀態型別