在 React 中缩放相对于容器变化的文本

Question

我正在使用 React.js 并且我希望输入文本适合它的容器但 onChange。

例如：如果用户输入 'T'

然后他输入'E'，所以现在的输入是'TE'

Answer 1

我创建了一个演示此功能的小应用程序。我正在使用两个状态 text 来管理文本框中的当前文本，以及一个 fontSize 用于计算文本的当前字体大小。我保留了 200px 的上限和 50px 的下限，这样文本看起来不会太大或太小。该比率是 1.2 这意味着每当添加一个新字符时，文本大小将增加到 1.2，如果删除一个字符，则大小将减少 1.2。这是一个应用程序。

import React, { useState, useCallback } from "react";

export default function App() {
  const [fontSize, setFontSize] = useState(200);
  const [text, setText] = useState("");
  const updateFontSize = useCallback(
    (value) => {
      if (text.length > value.length) {
        const textSize = Math.ceil(fontSize * 1.5, 10);
        fontSize < 200 && setFontSize(textSize);
      } else if (text.length < value.length) {
        const textSize = Math.ceil(fontSize / 1.5, 10);
        fontSize > 50 && setFontSize(textSize);
      }
      setText(value);
    },
    [fontSize, text]
  );
  return (
    <div className="App">
      <input
        type="text"
        onChange={(event) => updateFontSize(event.target.value)}
      />
      <div style={{ fontSize: `${fontSize}px` }}>{text}</div>
    </div>
  );
}

这里有一个代码沙箱link供您参考。

在 React 中缩放相对于容器变化的文本

Scale text on change relative to container in React

input

onchange

reactjs