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

Question

Basically, I've been tasked with editing a UI as a mini challenge to help get me into programming.

I want to add a date picker to my search bar in order to narrow down the search to between two dates. I have the UI working, although when the user selects a date using the picker, the date on the picker doesn't update. Nothing happens, and I'm not sure why.

Here is my code:

Search box:

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;

Date picker widget:

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;

I know that I need to write a function called update and pass it to the date picker as a prop... i just don't actually know how to do that or what it should look like.

Any help is appreciated as I'm just starting to enter this complicated programming world.

Here is a codesandbox link for easier reference: https://codesandbox.io/s/bold-torvalds-phoxq

Answer 1

It looks like the problem is actually in your index.js file. You are importing DatePickerWidget instead of Searchbox . Therefore, when you create your <App /> component you aren't passing an update function. I added an example where you are passing an update functionhere and it seems to work. I tried updating the code to use Searchbox instead, but there are other dependencies (CSS, etc.) that would need to be resolved. Let me know if that helps!

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 2

Your DatePickerWidget isn't updating because it doesn't have a state , you should add a state in which upon the change to your dates is reflected.

Ie DatePickerWidget

Answer 3

You can add the update function and pass as below.

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