chuckQu

V1

2022/06/28阅读:12主题:凝夜紫

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;
set-input-value-on-button-click.gif
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属性的记忆化对象值。

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

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

分类:

前端

标签:

React.js

作者介绍

chuckQu
V1