迹忆客 专注技术分享

在 React 中获取按钮点击输入的值：

1. 声明一个跟踪输入字段值的状态变量。
2. 将 onClick 道具添加到按钮元素。
3. 单击按钮时，访问状态变量。

import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  const handleChange = event => {
    setMessage(event.target.value);

    console.log('value is:', event.target.value);
  };

  const handleClick = event => {
    event.preventDefault();

    // 👇️ value of input field
    console.log('handleClick 👉️', message);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={handleChange}
        value={message}
        autoComplete="off"
      />

      <h2>Message: {message}</h2>

      <button onClick={handleClick}>Click</button>
    </div>
  );
};

export default App;

我们使用 useState 钩子来跟踪输入字段的值。

我们在字段上设置了 onChange 属性，所以每次它的值改变时，都会调用 handleChange 函数。

我们可以在 handleChange 函数中访问输入元素的值作为 event.target.value。

target 对象的目标属性引用输入元素。

我们可以使用消息状态变量在 handleChange 函数之外的任何位置访问输入字段的值。

我们在按钮元素上设置了 onClick 属性。每次单击按钮时，都会调用 handleClick 函数。

要在单击按钮时获取输入字段的值，我们只需访问 handleClick 函数中的消息状态变量。

或者，我们可以使用不受控制的输入字段。

要在 React 中获取按钮单击时不受控制的输入的值：

1. 使用 useRef 钩子初始化 ref 并将其设置在输入字段上。
2. 将 onClick 道具添加到按钮元素。
3. 单击按钮时，访问输入字段的值作为 ref.current.value。

import {useRef} from 'react';

const App = () => {
  const inputRef = useRef(null);

  function handleClick() {
    // 👇️ access input value
    console.log(inputRef.current.value);
  }

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        id="message"
        name="message"
        autoComplete="off"
      />

      <button onClick={handleClick}>Log message</button>
    </div>
  );
};

export default App;

上面的例子使用了一个不受控制的输入。请注意，输入字段没有 onChange 属性或值集。

我们可以使用 defaultValue 属性将初始值传递给不受控制的输入。但是，这不是必需的，如果我们不想设置初始值，可以省略该属性。

当使用不受控制的输入字段时，我们使用 ref 访问输入。

useRef() 钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数。

请注意 ，我们必须访问 ref 对象的当前属性才能访问我们设置 ref 属性的输入元素。

当我们将 ref prop 传递给元素时，例如<input ref={myRef} />，React将ref对象的 .current 属性设置为对应的DOM节点。

useRef 钩子创建一个普通的 JavaScript 对象，但在每次渲染时都会为您提供相同的 ref 对象。换句话说，它几乎是一个具有 .current 属性的记忆对象值。

需要注意的是，当你更改 ref 的当前属性的值时，不会导致重新渲染。

每次用户单击示例中的按钮时，不受控制的输入值都会被记录下来。

我们不应该在不受控制的输入（没有 onChange 处理程序的输入字段）上设置 value 属性，因为这会使输入字段不可变并且我们将无法在其中输入。