React CRUD应用中React.findDOMNode is not a function错误求解

嘿，我来帮你搞定这个报错！你遇到的问题其实是React版本更新后，findDOMNode方法已经被废弃甚至移除了，而且你现在用的旧版字符串refs（this.refs.xxx）也不是官方推荐的写法了。下面给你一步步讲怎么解决：

为什么会报错？ #

• 从React 16.3开始，官方就不再推荐使用React.findDOMNode，到React 18这个方法已经被完全移除了，所以不管你用React.findDOMNode还是ReactDOM.findDOMNode都会报错。
• 你现在用的this.refs.name这种字符串refs写法也已经被废弃，官方更推荐使用createRef（类组件）或者useRef（函数组件）来创建refs。

正确的解决方案（类组件） #

1. 在组件构造函数中创建refs #

constructor(props) {
  super(props);
  // 为每个输入框创建ref
  this.nameRef = React.createRef();
  this.emailRef = React.createRef();
  this.addressRef = React.createRef();
  this.stateRef = React.createRef();
  this.zipRef = React.createRef();
  this.cityRef = React.createRef();
}

2. 在JSX中绑定ref到输入框 #

把原来的ref="name"改成ref={this.nameRef}，其他输入框同理：

<form onSubmit={this.handleSubmit}>
  <input type="text" ref={this.nameRef} placeholder="姓名" />
  <input type="email" ref={this.emailRef} placeholder="邮箱" />
  <input type="text" ref={this.addressRef} placeholder="地址" />
  <input type="text" ref={this.stateRef} placeholder="州/省" />
  <input type="text" ref={this.zipRef} placeholder="邮编" />
  <input type="text" ref={this.cityRef} placeholder="城市" />
  <button type="submit">创建记录</button>
</form>

3. 修改handleSubmit函数获取值 #

通过ref.current.value来获取输入框的值，不需要再用findDOMNode了：

handleSubmit = function(e) {
  e.preventDefault();
  const name = this.nameRef.current.value.trim();
  const email = this.emailRef.current.value.trim();
  const address = this.addressRef.current.value.trim();
  const state = this.stateRef.current.value.trim();
  const zip = this.zipRef.current.value.trim();
  const city = this.cityRef.current.value.trim();

  // 这里添加你的记录创建逻辑，比如发送API请求
}

如果是函数组件的话 #

用useRef钩子来实现，代码会更简洁：

import React, { useRef } from 'react';

function CreateRecordForm() {
  // 创建refs
  const nameRef = useRef(null);
  const emailRef = useRef(null);
  const addressRef = useRef(null);
  const stateRef = useRef(null);
  const zipRef = useRef(null);
  const cityRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = nameRef.current.value.trim();
    const email = emailRef.current.value.trim();
    const address = addressRef.current.value.trim();
    const state = stateRef.current.value.trim();
    const zip = zipRef.current.value.trim();
    const city = cityRef.current.value.trim();

    // 处理创建记录的逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameRef} placeholder="姓名" />
      <input type="email" ref={emailRef} placeholder="邮箱" />
      <input type="text" ref={addressRef} placeholder="地址" />
      <input type="text" ref={stateRef} placeholder="州/省" />
      <input type="text" ref={zipRef} placeholder="邮编" />
      <input type="text" ref={cityRef} placeholder="城市" />
      <button type="submit">创建记录</button>
    </form>
  );
}

export default CreateRecordForm;

额外提醒 #

• 不要再用findDOMNode了，它不仅被废弃，还会绕过React的虚拟DOM机制，可能导致组件状态和真实DOM不同步的问题。
• 字符串refs（ref="xxx"）也尽量不要用，官方已经明确表示不推荐，未来可能会被移除。

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