如何在react中创建仅允许大写字母的受控形式？

Question

很抱歉，冗长的解释是最后一个问题。

在reactjs网站（https://reactjs.org/docs/forms.html）上给出了一个示例，如下所示：

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()});
}

这些教程通常说，当您按下一个键时，以受控形式（例如在输入字段中），然后调用onChange，该事件将调用handleChange事件，该事件将调用setState，并重新呈现该组件，以显示更改后的值。但这不是全部。到本机DOM输入字段调用onChange时，该输入字段已经被浏览器“渲染”，并且React不会重新渲染它。实际上，它会将（重新渲染的）虚拟DOM元素的状态与本机DOM元素的状态进行比较，然后发现没有区别，因此不执行任何操作。在这种情况下，该动作没有副作用（除了更改组件的状态之外）。

我知道对于初学者来说，在本教程的开始部分，一次讲述整个故事可能会令人困惑。但是该教程中的“ toUpperCase（）”示例具有误导性，因为它建议通过将值更改为value.handleChange中的toUpperCase（）将使组件仅接受带大写字母的字母，而没有副作用。但是，事实并非如此，任何人都可以尝试：仅在输入字段的中间选择一部分文本，然后按一个键。它肯定会转换为大写字母，但是在这种情况下，React将重新设置输入的value属性，从而导致文本光标（插入点）移动到文本的末尾。这是一个非常大的副作用。例如，如果用户想在文本中间替换一个单词，那么他只是无法以任何实际的方式来替换它。他会说这是错误的，它没有用-他会是对的。在这种特殊情况下，我知道我可以设置text-transform：uppercase并将小写版本存储在存储中，但这也有问题：如果我需要大写，那么当然应该大写在商店里。视图的行为不能确定存储中的数据表示形式。视图只能是视图，而不能是其他视图。

我检查了许多React相关的教程，并且所有教程都有这个“缺陷”。例如，这是来自reactjs.org的图表，显示了运行中的Flux：

它建议在操作通过调度程序，商店和控制器视图之后呈现视图。但是现实是视图不仅发出动作。它也将在发出动作之前更改其外观。React希望将DOM元素视为发出动作的视图，但实际上，它们会做其他事情。

同样的错误出现在reactjs教程中，带有select元素。（https://reactjs.org/docs/forms.html）他们只是说，通过更改“ multiple = {true}”属性，您可以进行多重选择。不，您不能，它只是行不通。当您在多项选择中选择多个项目时，浏览器将多次调用onChange事件：对每个选择的项目进行单独调用。结果，将不可能将组件的状态设置为所选项目的集合（至少不是从事件处理程序中）。我可以设置一个计时器，收集从onChange发出的所有更改，并最终使用收集的项目调用setState（）。但这违反了React的规则，因为应该有一个单一的真理来源。在这种情况下，将有多个来源（至少一会儿，直到收集所有事件）。任何人都可以看到，在具有许多异步处理程序的复杂应用程序中，

在我看来，一件非常简单的事情（“仅在输入框中接受大写字母”）是一件很难正确完成的事情。我必须在JavaScript中实现自己的输入框，或者为输入字段编写自定义呈现方法，以在值更改时将光标位置保持在正确的位置。两者似乎都是坏主意。

在谷歌搜索之后，我注意到有大量的组件在重新实现本机元素。实际上有数百个为React写的选择和多选组件，我怀疑这部分是由于本机DOM元素的行为。（例如，它们不是纯视图。）

问题：有人使用原生DOM组件做出反应吗？如果是这样，您如何在没有副作用的情况下实现真正的“受控”行为？可能吗？还是我不在乎，选择专门为React编写的某种UI工具包？（但即使如此，实现“大写输入字段”也可能需要额外的编程。）

Answer 1

这应该足够了：

handleChange(event) {
  const input = event.target;
  const start = input.selectionStart;
  const end = input.selectionEnd;

  this.setState(
    {value: input.value.toUpperCase()},
    () => input.setSelectionRange(start, end)
  );
}

还要检查：http : //blog.vishalon.net/javascript-getting-and-setting-caret-position-in-textarea

Answer 2

我已经写了简单的toInputUppercase功能，覆盖e.target.value和应用的属性onInput来<input />，我想利用元素。

import React, { useState } from "react";
import ReactDOM from "react-dom";

const toInputUppercase = e => {
  e.target.value = ("" + e.target.value).toUpperCase();
};

const App = () => {
  const [name, setName] = useState("");

  return (
    <input
      value={name}
      onChange={e => setName(e.target.value)}
      onInput={toInputUppercase} // apply on input which do you want to be capitalize
    />
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

希望它对你有用。