所以我有一個輸入欄位，可以接受用戶鍵入的任何輸入，并且我已經讓它看起來像是使用 CSS 樣式自動大寫首字母：textTransform: capitalize但是當我將 useState 變數分配給輸入欄位時，該值不是如輸入欄位所示正確大寫。我希望 useState 變數的值具有正確的大小寫，如輸入欄位中所示。
這是我的簡單代碼：
import {useState} from "react"
import "./styles.css";
import {Input} from "antd";
export default function App() {
const [text, setText] = useState("")
return (
<div className="App">
<Input placeHolder="Type Something" style={{textTransform:"capitalize"}} onChange={(e)=>{setText(e.target.value)}}/>
<br/>
value = {text}
</div>
);
}
這里還有一個代碼框鏈接，可以更好地可視化
uj5u.com熱心網友回復：
在將輸入傳遞給狀態時，您需要更改輸入的值：
onChange={(e) => {
setText(e.target.value.charAt(0).toUpperCase() e.target.value.slice(1));
}
uj5u.com熱心網友回復：
您可以嘗試以下代碼：
import React,{useEffect, useState} from "react"
const Home=()=>{
const [text, setText] = useState("")
const changeInput = (e)=>{
let str = e.target.value;
let con = str.split(' ')
.map(function (word, index) {
// First character upper case else lower case
return word.charAt(0)
.toUpperCase() word.slice(1)
.toLowerCase();
})
.join(' ');
setText(con);
}
return (
<div>
<input placeHolder="Type Something" style={{textTransform:"capitalize"}} onChange={(e)=>changeInput(e)}/>
<br/>
value = {text}
</div>
);
}
export default Home;轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448379.html
上一篇：頁面加載后微調器加載影片不會消失
下一篇：移動道路背景圖片