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

Question

基本上，我的任务是编辑 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 的函数并将其作为道具传递给日期选择器...我只是不知道如何执行此操作或它应该是什么样子。

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

这里是一个codeandbox链接，方便参考：https://codesandbox.io/s/bold-torvalds-phoxq

Answer 1

您的 DatePickerWidget 没有更新，因为它没有状态，您应该添加一个状态，以便在更改日期时反映出来。

即DatePickerWidget

Answer 2

看起来问题实际上出在您的index.js 文件中。您正在导入 DatePickerWidget 而不是 Searchbox。因此，当您创建 <App /> 组件时，您不会传递 update 函数。我添加了一个示例，您正在传递更新函数here，它似乎有效。我尝试更新代码以改用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
);

Answer 3

您可以添加更新功能并传递如下。

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