在 React hooks 中,可以使用 useState 来持有状态并更新它。下面是一个示例,展示如何在单个函数中使用两个点击处理程序来更新两个不同的状态:
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
function handleIncrement() {
setCount(count + 1);
}
function handleTextChange(event) {
setText(event.target.value);
}
return (
Count: {count}
Text: {text}
);
}
export default App;
在上面的示例中,我们使用了两个 useState 钩子来分别将 count 和 text 存储为状态。然后,我们定义了两个点击处理程序 handleIncrement 和 handleTextChange,当用户单击 Increment 按钮时调用 handleIncrement 处理程序,每次 count 状态将增加 1。当用户在输入框中输入文本时调用 handleTextChange 处理程序,每次 setText 将更新 text 状态。
最后,我们渲染了 count 和 text 状态,并将 handleIncrement 和 handleTextChange 处理程序传递给 Increment 按钮和文本框。