原文链接:https://bobbyhadz.com/blog/react-set-input-value-on-button-click
作者:Borislav Hadzhiev
注释从这开始~
总览
在 React 中,通过按钮点击设置输入框的值:
- 申明一个
state
变量,用于跟踪输出控件的值。 - 将
onClick
属性增加到button
元素上。 - 当
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
属性,因为这将使输出控件不可变,你将无奈在其中键入。