Javascript React：编写一个函数作为道具传递

基本上，我的任务是编辑一个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;

从“React”导入React；
从“@material ui/core”导入{TextField，按钮，排版}；
导入“/SearchBox.css”
从“/DatePickerWidget”导入DatePickerWidget
类SearchBox扩展了React.Component{
建造师（道具）{
超级（道具）；
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}）；
}
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）；
this.props.update（{searchTerm:this.state.searchTerm}）；
this.setState（{results:this.state.searchTerm}）；
}
validateSearch（）{
返回this.state.searchTerm！==“”；
}
清除（）{
this.setState（{searchTerm:，results:}）；
this.props.update（{searchTerm:“}）；
}
render（）{
返回(
清楚的
搜寻
{this.state.results&&(
显示的结果：{this.state.results}
)}
);
}
}
导出默认搜索框；

日期选择器小部件：

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;

从“React”导入React；
输入“日期fns”；
从“@material ui/core”导入{Paper}”；
从“@date io/date fns”导入DateFnsUtils；
进口{
MuiPickersUtilsProvider，
键盘日期选择器，
}来自“@物料界面/选择器”；
类DatePickerWidget扩展React.Component{
render（）{
返回(
this.props.update（{startDate:date}）
键盘按钮按钮={{
“aria标签”：“更改开始日期”，
}}
/>
this.props.update（{endDate:date}）}
键盘按钮按钮={{
“aria标签”：“更改结束日期”，
}}
/>
);
}
}
导出默认DatePickerWidget；

我知道我需要编写一个名为update的函数，并将其作为属性传递给日期选择器。。。我只是不知道该怎么做，也不知道它应该是什么样子

感谢您的帮助，因为我刚刚开始进入这个复杂的编程世界

---

这里有一个codesandbox链接，便于参考：

看起来问题实际上存在于您的

index.js

文件中。您正在导入的是

DatePickerWidget

，而不是

Searchbox

。因此，当您创建

时，它似乎可以工作。我尝试更新代码，改为使用
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
);

从“React”导入React；
从“react dom”导入react dom；
从“/DatePickerWidget”导入应用程序；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
console.log（“此处”）}/>
,
根元素
);
您的DatePickerWidget没有更新，因为它没有状态，您应该添加一个状态，当您的日期发生更改时，该状态会反映出来

也就是说，
您可以添加更新功能并按如下方式传递

const update = (value) => {
    console.log(value);
};
const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
     <App update={update} />
  </React.StrictMode>,
  rootElement
);

const update=（值）=>{
console.log（值）；
};
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
看起来你可以把它放在codesandbox上，你能做到吗？当然可以，在这里：