【发布时间】：2021-01-04 01:43:05
【问题描述】：
首先让我说我对整个编程很陌生，所以如果我问愚蠢的问题，请坦率地告诉我。
基本上，我正在尝试将日期选择器添加到响应中的搜索应用程序，我在那里有 UI，我可以在代码中预设日期范围。但是我希望用户能够选择搜索结果的开始和结束日期。
我知道我的代码不完整，我知道哪里出错了，但我只是不知道如何“修复”它。
日期选择器：
import React from "react";
import "date-fns";
import { Paper } from "@material-ui/core";
import DateFnsUtils from "@date-io/date-fns";
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from "@material-ui/pickers";
class DatePickerWidget extends React.Component {
render() {
return (
<Paper id="date-picker-widget" elevation={8}>
<Paper id="date-filters" elevation={8}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
margin="normal"
id="date-picker-dialog"
label="Start Date"
format="yyyy/MM/dd"
value={this.props.startDate}
maxDate={this.props.endDate}
onChange={(date) => this.props.update({ startDate: date })}
KeyboardButtonProps={{
"aria-label": "change start date",
}}
/>
<KeyboardDatePicker
margin="normal"
id="date-picker-dialog"
label="End Date"
format="yyyy/MM/dd"
value={this.props.endDate}
minDate={this.props.startDate}
onChange={(date) => this.props.update({ endDate: date })}
KeyboardButtonProps={{
"aria-label": "change end date",
}}
/>
</MuiPickersUtilsProvider>
</Paper>
</Paper>
);
}
}
export default DatePickerWidget;
显示日期选择器的搜索框：
import React from "react";
import { TextField, Button, Typography } from "@material-ui/core";
import "./SearchBox.css"
import DatePickerWidget from "./DatePickerWidget"
class SearchBox extends React.Component {
constructor(props) {
super(props);
this.state = { searchTerm: "", results: "" };
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.validateSearch = this.validateSearch.bind(this);
this.clear = this.clear.bind(this);
}
componentDidMount() {
this.setState({ searchTerm: this.props.searchTerm });
}
componentDidUpdate(prevProps) {
if (prevProps.searchTerm !== this.props.searchTerm)
this.setState({ searchTerm: this.props.searchTerm });
}
handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
this.props.update({ searchTerm: this.state.searchTerm });
this.setState({ results: this.state.searchTerm });
}
validateSearch() {
return this.state.searchTerm !== "";
}
clear() {
this.setState({ searchTerm: "", results: "" });
this.props.update({ searchTerm: "" });
}
render() {
return (
<React.Fragment>
<form id="search-form" onSubmit={this.handleSubmit}>
<Button
style={{ width: "40%" }}
variant="outlined"
color="primary"
onClick={this.clear}
disabled={this.state.results === ""}
>
Clear
</Button>
<TextField
style={{ flexBasis: "100%" }}
variant="outlined"
label="Search Term"
type="search"
name="searchTerm"
value={this.state.searchTerm}
onChange={this.handleChange}
/>
<Button
style={{ width: "40%" }}
variant="contained"
color="primary"
disabled={!this.validateSearch()}
type="submit"
>
Search
</Button>
<DatePickerWidget startDate="2020/09/01" endDate="2020/09/30"/>
</form>
{this.state.results && (
<Typography align="center" variant="body1">
Displaying results for: {this.state.results}
</Typography>
)}
</React.Fragment>
);
}
}
export default SearchBox;
我在界面上更改日期时遇到的错误：
TypeError：this.props.update 不是函数
format="yyyy/MM/dd"
value={this.props.startDate}
maxDate={this.props.endDate}
> onChange={(date) => this.props.update({ startDate: date })}
KeyboardButtonProps={{
"aria-label": "change start date",
我相当确定代码没问题，我只是没有在搜索框中添加一些内容，使用户能够更新日期范围。
我还应该提到，我知道这不会对搜索结果返回的内容产生任何影响。让该功能发挥作用是我的下一个挑战。
提前致谢！
*编辑：我忘了提到我没有编写所有这些代码。我的任务是学习如何添加这个小功能作为对整个编程的介绍。
**编辑：任何人都可以告诉我解决这个问题吗？就像我说的那样，我对此很陌生，我还没有完全理解所有内容。
【问题讨论】：
标签： javascript reactjs material-ui jsx