如何在React+Next.js项目中迁移并集成HTML中的JavaScript代码

迁移位置 #

这段处理输入框清空逻辑的代码，直接放到你集成index.html内容的组件文件里即可——也就是pages/index.js（Pages Router）或者app/page.js（App Router）。

具体操作方法 #

原生JS的DOM操作逻辑不符合React数据驱动的范式，建议改成React状态管理的写法，具体步骤如下：

1. 引入状态钩子并定义输入框状态 #

在组件顶部引入useState，用对象存储每个输入框的清空状态、输入值和文本颜色：

import { useState } from 'react';

export default function Home() {
  // 初始化3个输入框的默认状态
  const [fields, setFields] = useState({
    0: { value: '', isCleared: false, color: '#000' },
    1: { value: '', isCleared: false, color: '#000' },
    2: { value: '', isCleared: false, color: '#000' }
  });

2. 改写清空函数为React事件处理器 #

替换原生的clearField函数，通过更新状态来控制视图：

const handleClearField = (fieldId) => {
    setFields(prevState => {
      // 仅当输入框未被清空时执行操作
      if (!prevState[fieldId].isCleared) {
        return {
          ...prevState,
          [fieldId]: {
            value: '',
            isCleared: true,
            color: '#fff'
          }
        };
      }
      return prevState;
    });
  };

3. 渲染输入框并绑定状态与事件 #

把原来HTML里的输入框改成React写法，绑定状态值、样式和点击事件：

return (
    <div>
      {/* 这里放你从index.html迁移来的其他页面内容 */}
      <input
        type="text"
        id="0"
        value={fields[0].value}
        style={{ color: fields[0].color }}
        onClick={() => handleClearField('0')}
      />
      <input
        type="text"
        id="1"
        value={fields[1].value}
        style={{ color: fields[1].color }}
        onClick={() => handleClearField('1')}
      />
      <input
        type="text"
        id="2"
        value={fields[2].value}
        style={{ color: fields[2].color }}
        onClick={() => handleClearField('2')}
      />
    </div>
  );
}

（可选）如果坚持用原生DOM操作（不推荐） #

如果你一定要保留原生逻辑，可以用useEffect在组件挂载后定义全局函数，但这种方式违背React的设计理念，容易引发状态不一致问题：

import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    window.cleared = [0, 0, 0];
    window.clearField = function(t) {
      if (!window.cleared[t.id]) {
        window.cleared[t.id] = 1;
        t.value = '';
        t.style.color = '#fff';
      }
    };
  }, []);

  return (
    <div>
      {/* 输入框写法和原HTML一致 */}
      <input type="text" id="0" onclick="clearField(this)" />
      {/* 其他输入框同理 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者amit