在React中点击或修改某元素时如何获取另一元素的取值？

你提到的点击按钮获取上方输入框值的场景，有两种主流实现方案：

方法1：受控组件（推荐） #

通过React状态绑定输入框的值，完全符合React的单向数据流设计，不需要操作DOM，是最常用的方案。

import { useState } from 'react';

function Demo() {
  // 声明状态绑定输入框的值
  const [inputVal, setInputVal] = useState('');

  return (
    <div>
      <input 
        value={inputVal} 
        onChange={(e) => setInputVal(e.target.value)}
      />
      <button 
        onClick={() => console.log(inputVal)}
      >
        打印输入框值
      </button>
    </div>
  )
}

方法2：useRef绑定DOM节点 #

适合不需要实时同步输入框内容、仅需要在特定触发时机取值的场景，直接通过DOM节点读取值。

import { useRef } from 'react';

function Demo() {
  // 声明ref绑定输入框的DOM节点
  const inputRef = useRef(null);

  return (
    <div>
      <input ref={inputRef} />
      <button 
        onClick={() => console.log(inputRef.current.value)}
      >
        打印输入框值
      </button>
    </div>
  )
}

如果是需要在输入框内容修改时直接获取值，直接在input的onChange事件中读取e.target.value即可。

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