如何解决无法使用React钩子将TextField的状态设置为undefined
我希望将日期 private final Student student;
private final Set<SelectExpression> SELECT_ROWS = new HashSet<>();
public Set<SelectExpression> retrieveSubjects()
{
for (Year year : student.getYear())
{
SELECT_ROWS.add(new SelectExpression(
sub.getMajor(),sub.getMinor()
));
}
return SELECT_ROWS;
}
的初始状态设置为TextField
,直到用户选择了一个日期,然后允许用户轻松地将日期重置为{{1 }}。
在以下代码中,“重置”按钮会将undefined
状态正确重置为undefined
,但不会将parameters.count
重置为0
。在这种情况下,parameters.date
是否得到了特殊待遇?
undefined
解决方法
基于@cbr的评论的解决方案是在传递给undefined
之前将""
强制为TextField
。
import React,{ useState } from "react";
import { Button,TextField } from "@material-ui/core";
import "./App.css";
export type Parameters = {
count: number;
date?: string;
};
const initialParameters: Parameters = {
count: 0,date: undefined,};
export const App: React.FC = () => {
const [parameters,setParameters] = useState<Parameters>(initialParameters);
const handleCountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setParameters({
...parameters,count: Number(event.target.value),});
};
const handleDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setParameters({
...parameters,date: event.target.value,});
};
const resetState = () => {
setParameters(initialParameters);
};
// TextField expects blank string to represent no value.
const dateDisplay = parameters.date ? parameters.date : "";
return (
<div className="App">
<TextField
type="number"
label="Count"
value={parameters.count}
onChange={handleCountChange}
/>
<TextField
label="Date"
type="date"
value={dateDisplay}
onChange={handleDateChange}
InputLabelProps={{
shrink: true,}}
/>
<Button onClick={resetState}>Reset</Button>
</div>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。