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>

您可以在事件处理程序中传递任何所需内容。外部函数将在渲染时被调用。具有处理程序的内部函数将在菜单项单击时获得。例如，如果页面没有刷新过夜，那么你的日期参数可能会过时。就个人而言，我将＃days作为参数传递，然后在处理程序中获取当前日期并在那里进行偏移。

Material-UI MenuItem会自动向onClick函数发送参数吗？

1 个答案: