React 中输入值的自动大写答案

【问题标题】：Auto Capitalization of Input value in ReactReact 中输入值的自动大写
【发布时间】：2022-08-02 12:01:38
【问题描述】：

所以我有一个输入字段，可以接受用户输入的任何输入，并且我已经让它看起来像是使用 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 以获得更好的可视化效果

你可以做类似e.target.value.charAt(0).toUpperCase();
@MajorProductions您好，在尝试该值时，只会记录或存储键入的字符串的第一个字母。

标签： css reactjs forms frontend antd

【解决方案1】：

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

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

【讨论】：

谢谢，但我怎样才能使它只大写字符串的第一个字母？ :)
检查这个：stackoverflow.com/questions/1026069/…
感谢您提供的链接，它对我有很大帮助，但我快到了，我希望我的值看起来像这样“文本值”，但使用当前代码，我得到“文本值”
那你可以试试：setText(e.target.replace(/(^\w|\s\w)/g, m => m.toUpperCase()));。见stackoverflow.com/a/60610887/5103610

【解决方案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;

【讨论】：

【解决方案3】：

const handlecapClick = () => {

let newtext = text.charAt(0).toUpperCase() + text.slice(1);
setText(newtext);

};

【讨论】：