如何将这段JavaScript代码适配React？现有代码在React中无法正常运行

为什么原生代码在React里失效？ #

• 直接操作DOM违背React设计逻辑：你的代码全程通过getElementById、修改DOM的value来实现交互，但React是靠**状态（state）**驱动视图更新的，直接篡改真实DOM会让React的虚拟DOM和实际DOM状态脱节，导致交互异常。
• 原生事件绑定不兼容React机制：用currentRow.onclick这种原生方式绑定事件，会绕开React的合成事件系统，不仅容易和React的组件更新逻辑冲突，还可能引发内存泄漏。
• 原代码的作用域隐患：循环里用var i会导致变量作用域共享，不过你改箭头函数没解决问题，核心矛盾还是前两点。

React改写方案 #

React里我们要把数据和交互逻辑用状态管理起来，避免直接操作DOM，以下是完整的改写示例：

import { useState } from 'react';

function AuthorSearch() {
  // 用state维护列表数据和输入框值
  const [authors, setAuthors] = useState(['鲁迅', '巴金', '茅盾']);
  const [inputValue, setInputValue] = useState('');

  // 列表项点击事件处理
  const handleLiClick = (authorName) => {
    // 更新输入框状态
    setInputValue(authorName);
    // 触发搜索逻辑
    searchButton();
  };

  // 搜索函数，替换成你原来的search_button逻辑
  const searchButton = () => {
    console.log(`正在搜索作者：${inputValue}`);
    // 这里写原search_button的业务代码
  };

  return (
    <div>
      {/* 用JSX渲染列表，绑定React的onClick事件 */}
      <ul id="name">
        {authors.map((author, index) => (
          <li key={index} onClick={() => handleLiClick(author)}>
            {author}
          </li>
        ))}
      </ul>
      {/* 受控输入框，value绑定state，onChange更新state */}
      <input
        id="input"
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
    </div>
  );
}

export default AuthorSearch;

关键说明 #

• 受控组件：输入框的value和inputValue状态绑定，所有输入变化都通过onChange更新state，完全由React控制，避免直接操作DOM。
• 数据驱动视图：列表由authors数组渲染，数据变化时React自动更新视图，不用手动获取或修改DOM元素。
• 事件绑定：通过JSX的onClick直接传递作者名，无需再去读取DOM的innerHTML，逻辑更清晰。

如果你的列表数据是从接口获取的，可通过useEffect请求数据并更新状态：

import { useState, useEffect } from 'react';

function AuthorSearch() {
  const [authors, setAuthors] = useState([]);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    // 模拟接口请求获取列表数据
    fetch('/api/authors')
      .then(res => res.json())
      .then(data => setAuthors(data));
  }, []);

  // 其余逻辑同上...
}

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