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