Material-UI MenuItem автоматически отправляет аргумент в функцию onClick?

Question

У меня есть файл search.js и файл search-date.js. В файле search.js я отображаю контейнер SearchDate. Что я не понимаю, так это поведение компонента MenuItem при нажатии.

Как видите, функция onDayChange передается из Search в SearchDate. Затем эта функция передается в MenuItem в свойстве onClick. onDayChange в Search требуется аргумент date.

Прямо сейчас вызов alert, который я произвел: object. Откуда этот объект? Я не вижу нигде в своем коде, что он отправляется мной. И я не уверен, где искать в документах Material-UI.

search.js:

import SearchDate from '../components/search-date';
import { modelInstance } from '../model/model';    

class Search extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: null,
      searchSuggestion: 'Search for tweets here',
      anchorEl: null,
      date: 'Today',
      page: 0,
      placeName: 'the World'
    }

  componentDidMount() {
    modelInstance.addObserver(this);
  }

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  onDayChange = date => {
    alert(typeof date);
    this.setState({date: date})
    this.setState({ anchorEl: null });
  };



  render(){
    return(
        <div className='search'>
          <Row id='searchInput'>
            <SearchInput handleInput={this.handleInput.bind(this)} searchInput={this.state.searchInput} searchSuggestion={this.state.searchSuggestion} page={1}/>
          </Row>
          <Row>
            <SearchNav page={this.state.page}/>
          </Row>
          <Row id='date-location'>
            <Col xs={2} sm={2} md={2} className='text'>
              <p>FROM</p>
            </Col>
            <Col xs={4} sm={4} md={4} className='date'>
              <SearchDate date={this.state.date} anchorEl={this.state.anchorEl} click={this.handleClick} dayChange={this.onDayChange}/>
            </Col>
            <Col xs={2} sm={2} md={2} className='text'>
              <p>IN</p>
            </Col>
            <Col xs={4} sm={4} md={4} className='location'>
              <SearchLocation placeName = {this.state.placeName} handleLocation={this.handleLocation.bind(this)}/>
            </Col>

          </Row>
        </div>
    )
  }
}

export default Search;

Поиск-date.js:

const SearchDate = ({date, anchorEl, click, dayChange}) => {   
    return(
    <React.Fragment>
      <Button
        // variant="raised"
        aria-owns={anchorEl ? 'simple-menu' : null}
        aria-haspopup="true"
        onClick={click}
        margin={10}
      >
        {date}
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={dayChange}
      >
        {/* {daysList} */}

        <MenuItem onClick={dayChange}>Yesterday</MenuItem>
        <MenuItem onClick={dayChange}>2 Days past</MenuItem>
        <MenuItem onClick={dayChange}>3 Days past</MenuItem>
        <MenuItem onClick={dayChange}>4 Days past</MenuItem>
        <MenuItem onClick={dayChange}>5 Days past</MenuItem>
        <MenuItem onClick={dayChange}>6 Days past</MenuItem>
        <MenuItem onClick={dayChange}>7 Days past</MenuItem>
      </Menu>
    </React.Fragment>
  );
}

export default withStyles(styles)(SearchDate);

Answer 1

Material-UI передает событие DOM в качестве аргумента onClick.

onDayChange = (date) => (event) => { ...your code }

<MenuItem onClick={onDayChange('2 days past')}>2 Days past</MenuItem>

Вы можете передавать все, что хотите, в обработчик событий. Внешняя функция будет вызываться во время рендеринга. Внутренняя функция, в которой есть ваш обработчик, будет получена в момент нажатия пункта меню. Так, например, ваш параметр даты может устареть, если страница не обновится за ночь. Лично я бы передал число дней в качестве аргумента, затем получил бы текущую дату в обработчике и сделал бы там смещение.