Question

我正在使用rc日历软件包https://www.npmjs.com/package/rc-calendar
当我尝试从2019年删除9并将其更改为2018 ity正常工作时。
但是当删除整个日期1/15/2019时不允许这样做。
我正在尝试通过键盘输入手动输入日期。
我所有的日期更改都在handleChange（date）方法中
您能告诉我如何修复它，以便将来我自己修复它。
在下面提供我的沙盒和代码段。

https://stackblitz.com/edit/react-tch9tf?file=demo.js

class CalendarPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      date: new Date(),
      dateValue: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    console.log(date);
    console.log(moment(date));
    if (moment(date) != 'Invalid date') {

      if (date != null) {
        console.log('valid Date');
        this.setState({
          date: date
        });
        this.setState({
          dateValue: moment(date).format('MM-DD-YYYY')
        });
      } else {
        this.setState({
          dateValue: ''
        });
      }
    }
  }



  render() {
    const calendar = (<Calendar />);
    return (
      <div>
        <DatePicker
          animation="slide-up"
          value={moment(this.state.date)}
          disabled={false}
          calendar={calendar}
          onChange={this.handleChange}
        >{
            ({ value }) => {
              return (
                <input value={this.state.dateValue} />
              )
            }
          }</DatePicker>
      </div>
    )
  }
}

Answer 1

您应该为组件添加一个处理程序。也许像：

var url = "https://api.themoviedb.org/3/tv/popular?api_key=YOURKEY&language=en-US&page=1";
var img  = "https://image.tmdb.org/t/p/w500"
var tvSeriesImg = [];

var request = new XMLHttpRequest();     // New instance of XMLHttpRequest
request.open('GET', url, true);         // Open the connection using the 'GET' Method
request.onload = function(){          // Create an onload function this is where the data is displayed on the webpage

var data = JSON.parse(this.response);    // Creating a data variable where our JSON is parsed and stored.

if(request.status >= 200 && request.status < 400){      // Check the request status.
    data.results.forEach(results => {                   //Looping through the JSON Array
        const popTvSeries = document.getElementById('tv-series-data');
        const popTvSeriesCard = document.createElement('div');
        popTvSeriesCard.setAttribute('id', 'card');
        popTvSeries.appendChild(popTvSeriesCard);

        tvSeriesImg.push(results.poster_path);

        //Get the first 6 items from the array!!
        console.log(tvSeriesImg.slice(0, 6));

        tvSeriesImg.slice(0, 6).forEach(x => {
            const tvImage = document.createElement('img');
            tvImage.src = img + x;
            tvImage.setAttribute('id', 'movieThumb');
            popTvSeriesCard.appendChild(tvImage);
        });
    });
}
}

request.send();

然后，在您的类中为该<input value={this.state.dateValue} onChange={(e)=>{this.manualDateEntryFromInputHandler(e)}}/>事件实现处理程序：

onChange

我当然不知道要实现什么，但是至少可以让您手动输入日期。

通过输入键盘手动输入日期

1 个答案: