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