关于react.js:React技巧之设置input值

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

作者：Borislav Hadzhiev

注释从这开始~

总览

在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;

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属性，因为这将使输出控件不可变，你将无奈在其中键入。