在React输入中，我如何将输入的每个字母转换为大写，但您可以在中间键入，而不需要在每次按键时光标跳转到结尾？
在React中，您可以使用以下方法将输入的每个字母转换为大写，同时允许在中间键入而不需要在每次按键时光标跳转到结尾：
- 首先，在React组件的状态中添加一个变量来存储输入的值和转换后的值。例如，我们可以使用
inputValue和convertedValue来分别表示输入的值和转换后的值。
state = {
inputValue: '',
convertedValue: ''
};- 在输入框的
onChange事件中，使用toUpperCase()方法将输入的值转换为大写，并更新状态中的convertedValue。
handleChange = (event) => {
const inputValue = event.target.value;
const convertedValue = inputValue.toUpperCase();
this.setState({ inputValue, convertedValue });
};- 在渲染组件时，将输入框的值绑定到状态中的
inputValue，并显示转换后的值convertedValue。
render() {
const { inputValue, convertedValue } = this.state;
return (
<div>
<input
type="text"
value={inputValue}
onChange={this.handleChange}
/>
<div>转换后的值：{convertedValue}</div>
</div>
);
}这样，每当您在输入框中键入内容时，React会自动将其转换为大写，并在页面上显示转换后的值，而不会导致光标跳转到结尾。
推荐的腾讯云相关产品：无
请注意，以上答案仅供参考，具体实现方式可能因您的项目需求和代码结构而有所不同。
相关·内容
我的表单上有一个文本输入框，当该表单最初显示时，它以小数点(如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} onCha
浏览 7提问于2022-09-25得票数 -1
嗨，我在react用户输入文本时遇到了一个问题。我有一个项目列表和一个输入文本。当我在第一个输入框中输入时，所有的输入框都会发生变化。如何处理这件事。 示例代码 handleEditChange(event) {
event.preventDefault();
console.log(event.target.name)
console.log(event.target.value)
this.setState({
[event.target.name]: event.target.value
浏览 28提问于2020-04-13得票数 0
2回答
我不明白为什么我不能在<input onChange={this.handleArticleId} value={this.props.articleIdValue} placeholder="article id"/>中输入任何内容。如果我键入了什么，然后单击submit，只有这样，字母才会出现在输入框中。我从未见过的那种行为。
我做错了什么&我怎样才能解决这个问题？
这是SearchArticle
import React, { Component } from 'react';
import { connect } from '
浏览 1提问于2018-09-26得票数 1
回答已采纳
从下拉日历中选择日期并设置该值自动提交的时间之后。但是，我希望使用submit按钮来提交值。从研究中我认为，'event.preventDefault();'，语句应该可以防止这种事情发生。另外，该值是否存储在inputValue中？如果是，如何从日历类外部访问该值？
因此，为了清楚起见，我想使用submit按钮提交值。
class Calendar extends React.Component {
constructor(props) {
super(props);
this.state = {
浏览 3提问于2018-07-29得票数 2
回答已采纳
当涉及到简单的验证逻辑时，我不确定我是否理解如何组织我的第一个React JS应用程序。我的想法是将尽可能多的逻辑放到每个子组件中，但在我看来，当使用时，更符合逻辑的地方是父组件。但在我看来，这似乎是错误的，因为父母可能会为所有的孩子编写大量的代码。我已经提供了一个非常简单的例子来说明这个问题。
在我的示例代码中，有一个用于输入框的小型子组件，一个中间的组件包含两个这样的输入框(我们称它为用户名控件)，然后顶部的组件是一个编辑页面。每个组件都有自己版本的isValid。最低的子级验证输入在有效之前是否为空。中间的组件验证两个输入框都有内容。顶部的父编辑页面与中间的组件执行相同的操作。我的问题是
浏览 0提问于2020-05-07得票数 0
我做了一个小小提琴来说明这个问题：当您有一个附加了onBlur的输入框，以及状态的初始值时，来自键盘的输入会被阻塞。当onChange被附加时，它工作正常。为什么会发生这种情况，如何解决这一问题？我希望它能够接受您输入的字符并更新状态onBlur。
var Test = React.createClass({
getInitialState: function() {
return {
value: "hallo"
};
},
render: function() {
浏览 1提问于2015-05-20得票数 9
回答已采纳
1回答
在下面的父组件中，我有一个带有两个选项的下拉列表。如果选择“顶级”，则会显示一个名为Form1的表单。如果我选择"MAKE“，那么一个名为Form2的表单将显示出来。如果没有选择，那么这两种形式都是隐藏的。我在我的父组件中有一个Button，我想提交当前表单中显示的任何输入。因此，如果选择了“顶级”，并且单击了按钮，我希望记录来自Form1的输入。这有可能做到吗？还是我需要把所有的东西都放在一个组件中？如果可能的话，我需要使用Formik吗？如果我走错了路，请给我一个更好的建议。
父组件
import * as React from "react";
import {
浏览 3提问于2020-04-07得票数 0
回答已采纳
我在MeteorJS中有一个应用程序，它利用了React (我对JavaScript还可以，但从React开始就处于学习曲线上)。当前的搜索输入利用了输入框的onchange功能，但这实际上并不是我们想要的，因为这会大大减慢应用程序的运行速度--每次用户输入时都会发出请求。 我基本上希望输入是基本输入，然后有一个按钮来触发搜索。 内联代码，用于在需要的地方调用searchinput； <div className="col-md-4 col-xs-12" style={disabledStyling.control}>
<SearchInput pl
浏览 20提问于2021-01-27得票数 0
回答已采纳
3回答
import React, { Component, createElement } from "react";
export default class TodoList extends Component {
handleKeyDown = (e) => {
if (e.keyCode === 13) {
console.log("enter has been pressed");
}
};
handleChange = (e) => {
console.log("something h
浏览 5提问于2021-07-02得票数 0
回答已采纳
我有一个react组件，由一个输入字段和一个按钮组成。单击按钮时，我希望运行一个也是从父控制器继承的更新函数。在react文档中，它们有一个onchange处理程序附加到这个输入，并使用onchange事件对象获得输入的新值。然而，在我的例子中，我得到一个事件对象描述按钮，而不是输入字段。通过单击句柄访问新输入字段值的正确方法是什么？
class QuoteButton extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(t
浏览 2提问于2018-06-21得票数 0
回答已采纳
2回答
我有一个类组件，在其中调用一个函数。我有一个状态变量，并希望更新函数中的状态。因为它是不同的函数，所以我无法更新这个值。如何获得所选项目的详细信息并更新状态？当我执行setState时，收到以下错误为'TypeError: this.setState不是一个函数‘
任何有帮助的组件
import React, { Component } from 'react'
import PropTypes from "prop-types";
import statedist from "./StateDistrict.json";
const
浏览 2提问于2019-06-18得票数 0
回答已采纳
2回答
我有这个代码，但我不能让它工作。输入行根本不接受任何东西。我试着到处寻找都没有结果，所以我最终决定问这个问题。附言:我是个新手
class App extends React.Component {
state = { inputValue: [{item:'', name:''}] }
handleChange = e => {
const newValue = [...this.state.inputValue];
newValue[0][e.target.name] = e.target.value;
this.set
浏览 0提问于2018-06-04得票数 0
我已经构建了一个输入字段组件，并且需要从父组件访问它的值。我尝试了一些类似于document.getelementById(id).value的方法，但是它将返回null作为值。
父组件：
import StateBox from './StateBox.js';
import React, { Component } from 'react';
export default class AdressenListe extends Component {
render() {
let filteredAdressen = this.props.adre
浏览 1提问于2018-01-30得票数 0
我目前在一个div中呈现用户输入，与我的表单在同一个组件中。我希望将用户输入呈现在另一个页面上(在我的另一个组件中)。如何在应用程序的不同组件中呈现用户输入？
app的结构: App.js ( react路由器的导航设置)3个组件: Home.js、ProjectIdeas.js和Projects.js Planning.js (包含我的表单并当前呈现用户输入的组件)是Projects.js的子项。Projects.js是我想呈现用户输入的地方。
Planning.js
constructor() {
super()
this.state = {
ti
浏览 16提问于2020-02-06得票数 1
使用react 16.9.0。
我试图理解为什么以下内容无法更新组件title的state属性
this.setState({
[formControlName]: event.target.value
});
但这确实是：
this.setState({
title: event.target.value
});
考虑以下构成部分：
export class BookForm extends React.Component {
constructor(props) {
super(props);
this.state = { ...props.book };
浏览 0提问于2019-09-13得票数 2
回答已采纳
在React中，如果当前组件的输入(文本字段)为空，我希望停止呈现下一个组件。我没有表单或输入提交标签，只有状态和onChange方法。
class TextFields extends React.Component {
constructor(props){
super(props);
this.state = {
studentId: null,
studentName: null,
employeeName: null,
supervisorName: null,
};
}
handleChang
浏览 2提问于2018-09-12得票数 0
我使用react-select显示国家列表，但当我单击输入框时，它接受数字和字母，同时也使用两者进行搜索，但我只想使用字母进行搜索。
<>
<div
style={{
display: hide && "none",
position: "absolute",
marginLeft:
浏览 4提问于2022-05-11得票数 0
我在一个表单中有多个用户输入，目前我正在打印到控制台。提交表单时，我希望在新页面上以单独的卡片呈现输入内容。
我需要在代码中添加/更改什么，才能使用户输入显示在卡片或任何html元素中，而不是呈现到控制台？
class Planning extends React.Component {
constructor() {
super()
this.state = {
title: '',
goal: '',
tech: '',
features: ''
浏览 6提问于2020-02-03得票数 1
我正在做一个使用ReactJS的学校项目，我正在为桌面做一个简单的角色创建器。从本质上讲，它是一个向导，引导你完成角色创建的各个步骤。 每个步骤都是它自己的组件，它包含由单独的Utils文件提供的输入字段。 我的主要组件有一个如下所示的呈现： <div className="content-wrapper">
{this.state.stage === 0 &&
<PlayerInfo/>
}
{this.state.stage === 1 &&
<
浏览 14提问于2021-01-15得票数 0
3回答
在更新状态后，我试图清空输入标签：
state = {
formName: '',
inputs: [],
tempInput: {
inputLabel: '',
inputType: '',
inputValue: ''
}
};
这是我的表格：
<div className="formG">
<form className="form-maker" onSubmit={this.han
浏览 1提问于2018-09-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
