我发现有几种方法可以用钩子处理用户的文本输入。用钩子处理输入的更好或更合适的方法是什么?你会用哪一种?
1)处理输入的最简单的钩子,但是你有更多的字段,你必须写更多重复的代码。
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
活动:
onChange={event => setPassword(event.target.value)}
onChange={event => setUsername(event.target.value)}
2) 与上面的示例类似,但具有动态键名
const [inputValues, setInputValues] = useState({
username: '', password: ''
});
const handleOnChange = event => {
const { name, value } = event.target;
setInputValues({ ...inputValues, [name]: value });
};
活动:
onChange={handleOnChange}
3) 作为useState
的替代方案,正如ReactJS文档中所述,useReducer
通常比useState
更可取。
const [inputValues, setInputValues] = useReducer(
(state, newState) => ({ ...state, ...newState }),
{username: '', password: ''}
);
const handleOnChange = event => {
const { name, value } = event.target;
setInputValues({ [name]: value });
};
活动:
onChange={handleOnChange}
4) useCallback
将返回一个回调的备忘录版本,该版本仅在其中一个依赖项发生更改时才会更改。
const [inputValues, setInputValues] = useState({
username: '', password: ''
});
const handleOnChange = useCallback(event => {
const { name, value } = event.target;
setInputValues({ ...inputValues, [name]: value });
});
活动:
onChange={handleOnChange}
这就是我现在的用法:
const [inputValue, setInputValue] = React.useState("");
const onChangeHandler = event => {
setInputValue(event.target.value);
};
<input
type="text"
name="name"
onChange={onChangeHandler}
value={inputValue}
/>
是的,你可以用useState()处理反应挂钩
import React, {useState} from 'react'
export default () => {
const [fName, setfName] = useState('');
const [lName, setlName] = useState('');
const [phone, setPhone] = useState('');
const [email, setEmail] = useState('');
const submitValue = () => {
const frmdetails = {
'First Name' : fName,
'Last Name' : lName,
'Phone' : phone,
'Email' : email
}
console.log(frmdetails);
}
return(
<>
<hr/>
<input type="text" placeholder="First Name" onChange={e => setfName(e.target.value)} />
<input type="text" placeholder="Last Name" onChange={e => setlName(e.target.value)} />
<input type="text" placeholder="Phone" onChange={e => setPhone(e.target.value)} />
<input type="text" placeholder="Email" onChange={e => setEmail(e.target.value)} />
<button onClick={submitValue}>Submit</button>
</>
)
}
编写一个返回输入值的可重用函数怎么样...和
function useInput({ type /*...*/ }) {
const [value, setValue] = useState("");
const input = <input value={value} onChange={e => setValue(e.target.value)} type={type} />;
return [value, input];
}
然后可以用作:
const [username, userInput] = useInput({ type: "text" });
const [password, passwordInput] = useInput({ type: "text" });
return <>
{userInput} -> {username} <br />
{passwordInput} -> {password}
</>;
当类组件的输入道具相同时,可以使用PureComponent或ShouldComponentUpdate来避免呈现。现在,您可以通过将函数组件包装在react.memo中来对它们进行同样的处理。 所期望的: 我希望只有当模态可见时才呈现模态(由this.props.show管理) 对于类组件: 如何在功能组件中使用?在modal.jsx中? 相关代码: 功能组件modal.jsx(我不知道如何检查
问题内容: tldr; 如何模拟或将prop与数组配合使用以强制重置组件? 我正在实现一个显示计时器的组件,并在该组件达到零时执行回调。目的是让回调更新对象列表。后一个组件由新的React钩子 和组成。 该包含在该定时器启动时的基准,而剩余的时间。该套间隔称为每秒钟更新的剩余时间,并检查是否回调应该叫。 该组件并不是要重新安排计时器的时间,或者在间隔达到零时保持间隔不变,而是应该执行回调和空闲。为
在React的官方文件中提到- 如果您熟悉React类生命周期方法,那么可以将useEffect钩子看作componentDidMount、componentDidUpdate和componentWillUnmount的组合。 我的问题是--我们如何在钩子中使用生命周期方法?
我有一个组件,我在其中调用我的自定义钩子。 自定义钩子如下所示: 而我在其中使用的导致错误的组件是: 有什么想法吗?
我第一次面对的问题很小。我试图使用一个简单的useState,但出于某种原因,我不明白为什么React会给我一个错误,不管我想做什么--没有什么能修复它。 这是错误的图像:错误描述: 错误:无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一:1.React和呈现器(例如React DOM)2的版本可能不匹配。你可能违反了钩子3的规则。在同一个应用程序中可能有多个React副
在视频中。js的官方文件https://docs.videojs.com/tutorial-react.html 我们有 我想创建具有钩子的功能组件 我有个警告 如果我将依赖数组从更改为在每个渲染上运行,我只是想在第一次运行它,就像 如何使用钩子准确地创建?