反应:编写函数作为道具传递
反应:编写函数作为道具传递
提问于 2020-09-17 13:23:17
基本上，我的任务是编辑一个UI作为一个小挑战，以帮助我进入编程。
我想在搜索栏中添加一个日期选择器，以便将搜索范围缩小到两个日期之间。我可以使用UI，尽管当用户使用选择器选择日期时，选择器上的日期不会更新。什么都没发生，我也不知道为什么。
这是我的代码：
搜索框：
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 update={this.props.update}/>
</form>
{this.state.results && (
<Typography align="center" variant="body1">
Displaying results for: {this.state.results}
</Typography>
)}
</React.Fragment>
);
}
}
export default SearchBox;日期选择器小部件：
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;我知道我需要编写一个叫做update的函数，并将它作为一个支柱传递给日期选择器.我只是不知道该怎么做，也不知道应该是什么样子。
任何帮助都是非常感谢的，因为我刚刚开始进入这个复杂的编程世界。
下面是一个便于参考的代码框链接：https://codesandbox.io/s/bold-torvalds-phoxq
Stack Overflow用户
发布于 2020-09-17 14:39:34
看起来问题实际上在您的index.js文件中。您正在导入DatePickerWidget而不是Searchbox。因此，在创建<App />组件时，不传递update函数。我添加了一个示例，在其中传递更新函数这里，它似乎可以工作。我尝试用Searchbox来更新代码，但是还有其他的依赖项(CSS等等)。这需要解决。如果这有帮助的话请告诉我！
import React from "react";
import ReactDOM from "react-dom";
import App from "./DatePickerWidget";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App update={() => console.log("here")} />
</React.StrictMode>,
rootElement
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63939029
复制相关文章
相似问题
腾讯云开发者
