Question

我用NASA的api创建了一个反应单页应用程序当天的图片。我想在抽屉中添加所显示图像的历史记录，但我只想显示它的日期。

我不知道如何动态创建包含此日期的MenuItem列表。我知道只显示当前日期。

import React, { Component } from 'react';
import axios from 'axios';
import moment from 'moment';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import RaisedButton from 'material-ui/RaisedButton';
import DatePicker from 'material-ui/DatePicker';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import AppBar from 'material-ui/AppBar';
import {
  cyan500, cyan700,
  pinkA200,
  grey100, grey300, grey400, grey500,
  white, darkBlack, fullBlack,
} from 'C:\\Users\\pitig\\Documents\\SPA\\nasaimages\\node_modules\\material-ui\\styles\\colors';
import logo from './NASA_logo.png';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      open: false,
      controlledDate: moment(),
      image: {}
    };
  }

  handleToggle = () => this.setState({ open: !this.state.open });

  handleClose = () => this.setState({ open: false });

  componentWillMount() {
    this.getImage(this.state.controlledDate);
  }

  getImage = (date) => {
    axios({
      url: 'https://api.nasa.gov/planetary/apod',
      method: 'get',
      params: {
        api_key: 'qreJekgvmqSs2lqss9dlk2RGveoViwHvXV4T6wlG',
        date: date.format('YYYY-MM-DD'),
      },
    }).then(response => response.data)
      .then((image) => {
        this.setState({
          image: image
        })
      });
  }

  handleChange = (event, date) => {
    this.setState({
      controlledDate: moment(date),
    });
    this.getImage(moment(date));
  };

  onNext = (event) => {
    const current = this.state.controlledDate;
    const date = current.add(1, 'days');
    this.setState({
      controlledDate: date
    });
    this.getImage(moment(date));
  }

  onPrevious = (event) => {
    const current = this.state.controlledDate;
    const date = current.subtract(1, 'days');
    this.setState({
      controlledDate: date
    });
    this.getImage(moment(date));
  }

  render() {
    var muiTheme = getMuiTheme({
      palette: {
        primary1Color: '#135DAE',
        primary2Color: cyan700,
        primary3Color: grey400,
        accent1Color: '#EF243A',
        accent2Color: grey100,
        accent3Color: grey500,
      },
      appBar: {
        height: 50,
      },
    })

    return (


      <MuiThemeProvider muiTheme={muiTheme}>

        <div className="App">
          <AppBar
            title="NASA: Image of the day"
            iconClassNameRight="muidocs-icon-navigation-expand-more"
            onLeftIconButtonTouchTap={this.handleToggle}
          />

          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to NASA: Image of the day</h1>
          </header>

          <p className="App-intro">
            Pick the date you want.
       </p>

          <DatePicker
            hintText="Selected day"
            value={this.state.controlledDate.toDate()}
            onChange={this.handleChange}
            autoOk
          />

          <RaisedButton
            label="Previous"
            secondary={true}
            onClick={this.onPrevious}
          />

          <RaisedButton
            label="Next"
            primary={true}
            onClick={this.onNext}
          />
          <h1>{this.state.image.title}</h1>
          <img src={this.state.image.url} />

          <div>
            <Drawer
              docked={false}
              width={200}
              open={this.state.open}
              onRequestChange={(open) => this.setState({ open })}
            >
              <MenuItem onClick={this.handleClose}>{this.state.image.date}</MenuItem>
            </Drawer>
          </div>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

Answer 1

将日期历史记录设置为Array作为状态，然后在获取图像时，将图像日期添加到该数组。并显示如下。

<Drawer
          docked={false}
          width={200}
          open={this.state.open}
          onRequestChange={(open) => this.setState({ open })}
        >
        {this.state.history.map((el,index)=>{
          return <MenuItem key={index} onClick={this.handleClose}>{el}</MenuItem>;
          }
        }
        </Drawer>

动态创建菜单项

1 个答案: