我无法在我的 React 应用程序中使用任何字符串方法。黑屏或白屏问题

Question

function InputBox() {
  const [txt, setTxt] = useState(" ");
  const changed = (e) => {
    convertedTxt = txt;
    setTxt(e.target.value);
  };
  const covtToUpper = () => {
    console.log("yoyoyooy");
    convertedTxt = txt.toUpperCase();
    setTxt(convertedTxt);
  };
  const covtToLower = () => {
    convertedTxt = txt.toLowerCase();
    // txtArea.value = convertedTxt;
    setTxt(convertedTxt);
  };
  return (
    <>
      <div className="box-c">
        <div className="box">
          <h1>Enter You Text Here !</h1>
          <textarea
            name="input"
            value={txt}
            onChange={changed}
            id="Input"
            rows="10"
          ></textarea>
          <div className="btns">
            <button
              type="button"
              onClick={covtToUpper}
              className="btn btn-primary"
            >
              Convert to Uppercase
            </button>
            <button
              type="button"
              onClick={covtToLower}
              className="btn btn-success"
            >
              Convert to Lowercase
            </button>
          </div>
        </div>
        <div className="box-2">
          <h2>Your text summary</h2>
          <div className="data">
            <b>{txt.length} character </b>
            <b> {txt.split(" ").length} words</b>
          </div>
          <b> {0.008 * txt.split(" ").length} minutes to read</b>
        </div>
        <div className="box-3">
          <h2>Preview</h2>
          <p>{txt}</p>
        </div>
      </div>
    </>
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

我无法在我的 React 应用程序中使用和字符串方法。黑屏或白屏问题

基本上，我在很长一段时间后才构建React应用程序，我曾经使用类基础组件创建它，但两年后，我展示了一些yt视频并了解功能基础组件，然后我构建了一个应用程序，但是当我运行这个应用程序时，我的屏幕出现了白色或空白我读了很多社论但没有得到正确的答案。

Answer 1

为了使用任何字符串方法，您应该使用

function InputBox() {
  const [txt, setTxt] = useState(" ");
  const changed = (e) => {
    convertedTxt = txt;
    setTxt(e.target.value);
  };
  const covtToUpper = () => {
    console.log("yoyoyooy");
    convertedTxt = txt.toUpperCase();
    setTxt(convertedTxt);
  };
  const covtToLower = () => {
    convertedTxt = txt.toLowerCase();
    // txtArea.value = convertedTxt;
    setTxt(convertedTxt);
  };
  return (
    <>
      <div className="box-c">
        <div className="box">
          <h1>Enter You Text Here !</h1>
          <textarea
            name="input"
            value={txt}
            onChange={changed}
            id="Input"
            rows="10"
          ></textarea>
          <div className="btns">
            <button
              type="button"
              onClick={covtToUpper}
              className="btn btn-primary"
            >
              Convert to Uppercase
            </button>
            <button
              type="button"
              onClick={covtToLower}
              className="btn btn-success"
            >
              Convert to Lowercase
            </button>
          </div>
        </div>
        <div className="box-2">
          <h2>Your text summary</h2>
          <div className="data">
            <b>{txt.length} character </b>
            <b> {txt.split(" ").length} words</b>
          </div>
          <b> {0.008 * txt.split(" ").length} minutes to read</b>
        </div>
        <div className="box-3">
          <h2>Preview</h2>
          <p>{txt}</p>
        </div>
      </div>
    </>
  );
}

例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

不起作用，但是

${}

会完成这项工作。