extreact - 为什么使用 ExtReact 在函数中查询不更新值但获取初始值
问题描述
我有表格 fn
代码在这里#update代码。我初始化
query = {
field: '',
email: '',
}
不是初始化网址
export function HomePage() {
const [query, setQuery] = useState({
field: '',
email: '',
});
const handleChaneValue = (value) => {
// not received data on change
console.log('query', query);
setQuery({
...query,
[value.sender.name]: value.newValue
})
}
console.log('query2', query);
query2 收到有关更改的数据
console.log('query2', 查询);
#更新代码:我添加
return (
<div>
<Container
padding={10}
platformConfig={{
desktop: {
maxWidth: 400,
}
}}
>
<FormPanel
padding={10}
shadow
defaults={{
errorTarget: 'under'
}}
margin="0 0 20 0"
title="Using Validators"
>
<Textfield
required
label="Required Field"
requiredMessage="This field is required."
errorTarget="under"
name="field"
onChange={handleChaneValue}
/>
<EmailField
label="Email"
validators="email"
errorTarget="under"
name="email"
onChange={(e) => handleChaneValue(e)}
/>
<Urlfield
label="URL"
validators={{
type: 'url',
message: 'Website url example http://'
}}
errorTarget="under"
name="url"
onChange={handleChaneValue}
/>
<Container layout="center">
<Button
ui="confirm"
text="BTN submit"
handler={handleClick}
style={{border: '1px solid black' }}/>
</Container>
</FormPanel>
</Container>
</div>
)
} 导出默认主页;
当我更改 TextField 中的值时。查询是
query2: {field: 'abc'}
但是我更改了电子邮件字段中的值。查询没有给出旧值“{filed:'abc'}”,我使用 ES6 三个点。
query2 : {email: 'xyz'}
和查询功能始终初始化
query: {}
#更新图像:当我更改值 Url 时。fn handleChangeValue 获取初始化查询
查询:{字段:'',电子邮件:'',}
不值查询更新。
解决方案
这里的问题是你没有初始化文本字段和电子邮件字段的值我更新了代码请现在检查
export function HomePage() {
const [query, setQuery] = useState({
field:'',
email:''
});
const handleChaneValue = (value) => {
// not received data on change
console.log("query", query);
setQuery({
...query,
[value.sender.name]: value.newValue,
});
};
console.log("query2", query);
return (
<div>
<Container
padding={10}
platformConfig={{
desktop: {
maxWidth: 400,
},
}}
>
<FormPanel
padding={10}
shadow
defaults={{
errorTarget: "under",
}}
margin="0 0 20 0"
title="Using Validators"
>
<Textfield
required
label="Required Field"
requiredMessage="This field is required."
errorTarget="under"
name="field"
onChange={handleChaneValue}
value={query.field}
/>
<EmailField
label="Email"
validators="email"
errorTarget="under"
name="email"
value={query.email}
onChange={handleChaneValue}
/>
<Container layout="center">
<Button
ui="confirm"
text="BTN submit"
handler={handleClick}
style={{ border: "1px solid black" }}
/>
</Container>
</FormPanel>
</Container>
</div>
);
}
export default HomePage;
推荐阅读
- python - Python:在第二个破折号之前按字符分组
- javascript - calc 没有在 HTMLbutton.onclick 中定义
- c++ - 突破 OpenMP 部分和任务
- java - 如何修复代码以显示来自 Firebase 的数据?
- mysql-workbench - 如何修复 MySQL Workbench 8 在 Ubuntu 18.10 上崩溃
- css - 在 Google 搜索中为“下一步”按钮找到正确的 xpath
- node.js - GraphQL 解析器返回错误“无法读取 forEach of Undefined”
- python - Pyinstaller - 如何隐藏导入moviepy?
- javascript - 在 Sphere 上应用图片的问题
- javascript - 递归查找 JSON 值并返回对象