React技巧之设置input值

原文链接：https://bobbyhadz.com/blog/react-set-input-value-on-button-click[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

总览

在React中，通过按钮点击设置输入框的值：

1. 声明一个state变量，用于跟踪输入控件的值。
2. 将onClick属性添加到button元素上。
3. 当button被点击时，更新state变量。

import {useState} from 'react';

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

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

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

    // 👇️ value of input field
    console.log('old value: ', message);

    // 👇️ set value of input field
    setMessage('New value');
  };

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

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

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

export default App;

set-input-value-on-button-click.gif

useState

我们使用useState钩子来跟踪输入控件的值。我们在控件上设置了onChange属性，因此每当控件的值有更新时，handleChange函数就会被调用。

在handleChange函数中，当用户键入时，我们更新了输入控件的状态。

我们在button元素上设置了onClick属性。每当按钮被点击时，handleClick函数就会被调用。

要更新输入控件的状态，只需更新state变量。如果你需要清除输入控件的值，把它设置为空字符串。

或者，你也可以使用不受控制的输入控件。

useRef

import {useRef} from 'react';

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

  function handleClick() {
    // 👇️ update input value
    inputRef.current.value = 'New value';

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

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

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

export default App;

上述示例使用了不受控制的input。需要注意的是，输入控件没有onChange属性或者value设置。

你可以用defaultValue属性给一个不受控制的input传递一个初始值。然而，这并不是必须的，如果你不想设置初始值，你可以省略这个属性。

当使用不受控制的输入控件时，我们使用ref来访问input元素。useRef()钩子可以被传递一个初始值作为参数。该钩子返回一个可变的ref对象，其.current属性被初始化为传递的参数。

需要注意的是，我们必须访问ref对象的current属性，以获得对我们设置ref属性的input元素的访问。

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

useRef钩子创建了一个普通的JavaScript对象，但在每次渲染时都给你相同的ref对象。换句话说，它几乎是一个带有.current属性的记忆化对象值。

需要注意的是，当你改变ref的current属性的值时，不会导致重新渲染。每当用户点击按钮时，不受控制的input的值会被更新。

你不应该在一个不受控制的input（一个没有onChange处理函数的输入控件）上设置value属性，因为这将使输入控件不可变，你将无法在其中键入。

参考资料

[1]

https://bobbyhadz.com/blog/react-set-input-value-on-button-click: https://bobbyhadz.com/blog/react-set-input-value-on-button-click

[2]

Borislav Hadzhiev: https://bobbyhadz.com/about