React中输入值的自动大写

Question

所以我有一个输入字段，它接受用户输入的任何输入，我已经使用 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>
  );
}

这里还有一个codesandbox link为了更好的可视化

Answer 1

将输入传递给状态时需要更改输入的值：

onChange={(e) => {
  setText(e.target.value.charAt(0).toUpperCase() + e.target.value.slice(1));
}

Answer 2

您可以试试下面的代码：

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;

React中输入值的自动大写

Auto Capitalization of Input value in React

css

forms

frontend

reactjs

antd