為什么我不能在我的輸入框中保存帶有十進制值的數字？ 它只允許更新整數？

Question

我的表單上有一個文本輸入框，當表單最初顯示時，它會顯示帶有小數點的價格，如910.01 。

const initialState: OrderWindowState = {        
    price1: 910.01,
    price2: 911.33,
    
  }


const [state, setState] = useState<OrderWindowState>(initialState);



<input type="text" name="price1" value={state.price1} onChange={price1OnChange} />


const price1OnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    console.log("price1OnChange called:" + event.target.value);    
    setState({
      ...state,
      price1: +event.target.value
    })
  };

當我開始更新數字時，如果我輸入小數點. 我可以在我的console.log消息中看到它，但是存儲在我的 state 中並且在我的文本輸入中可見的數字只顯示 integer 值（沒有十進制值）。

為什么要這樣做？

Answer 1

當您執行+event.target.value時，字符串值將轉換為數字 - 並且數字沒有尾隨. s。 因此，當組件重新渲染時，之前鍵入的. 不會反映在 state 中，因此也不會在受控組件的值中看到。

一種方法是將字符串輸入保留在 state 中，並僅在以后需要時將其轉換為數字。 例如：

 const App = () => { const [price1, setPrice1] = React.useState(910.01); const price1OnChange = (event) => { setPrice1(event.target.value); }; const price1Number = Number(price1); return ( <div> <input type="text" name="price1" value={price1} onChange={price1OnChange} /> <div> Number value: {Number.isNaN(price1Number)? 'Not a number - correct your input': price1Number} </div> </div> ); }; ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div class='react'></div>

以上是在 JS 中，以便可以輕松運行代碼段，但同樣的方法適用於 TypeScript - 將OrderWindowState更改為接受字符串而不是數字，並將 price1 price1: +event.target.value更改為 price1 price1: event.target.value 。

因為 price1 和 price2 的值是分開的，所以您可以考慮為它們使用不同的狀態（就像我在上面所做的那樣，並且按照 React 的建議）。