Select 并使用 react-datepicker 仅选择 div 更新日期

Question

我正在开发一个 React 应用程序。我有 3 个 div，每个都有 DatePicker 组件。我想更新所选的日期。当我更改日期时，它会每隔 div.

更新一次

这是代码 -

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';

import './App.css';

import 'react-datepicker/dist/react-datepicker.css';

class Application extends React.Component {

    constructor(props) {
        super(props)
        this.state = { date: moment() };
    }

    dateChanged = (d) => {
        this.setState({ date: d });
    }


    render() {
        return (
            <div>
                <div>
                    <DatePicker selected={this.state.date} onChange= {this.dateChanged} />
                </div>
                <div>
                    <DatePicker selected={this.state.date} onChange={this.dateChanged} />
                </div>
                <div>
                    <DatePicker selected={this.state.date} onChange={this.dateChanged} />
                </div>
            </div>
        );
    }
}

export default Application;

Answer 1

为此，您需要在状态中为每个人提供键和值

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';

import './App.css';

import 'react-datepicker/dist/react-datepicker.css';

class Application extends React.Component {

    constructor(props) {
        super(props)
        this.state = { date1: moment(), date2: moment(), date3: moment() };
    }

    dateChanged = (provider, d) => {
        this.setState({ [provider]: d });
    }


    render() {
        return (
            <div>
                <div>
                    <DatePicker selected={this.state.date} onChange={this.dateChanged.bind(this, "date1")} />
                </div>
                <div>
                    <DatePicker selected={this.state.date} onChange={this.dateChanged.bind(this, "date2")} />
                </div>
                <div>
                    <DatePicker selected={this.state.date} onChange={this.dateChanged.bind(this, "date3")} />
                </div>
            </div>
        );
    }
}

export default Application;

Answer 2

这里是你如何做到的。

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';

import './App.css';

import 'react-datepicker/dist/react-datepicker.css';

class Application extends React.Component {

    constructor(props) {
        super(props)
        this.state = { date1: moment(), date2: moment(), date3: moment() };
    }

    dateChanged = (provider, d) => {
        this.setState({ [provider]: d });
    }


    render() {
        return (
            <div>
                <div>
                    <DatePicker selected={this.state.date1} onChange={this.dateChanged.bind(this, "date1")} />
                </div>
                <div>
                    <DatePicker selected={this.state.date2} onChange={this.dateChanged.bind(this, "date2")} />
                </div>
                <div>
                    <DatePicker selected={this.state.date3} onChange={this.dateChanged.bind(this, "date3")} />
                </div>
            </div>
        );
    }
}

export default Application;

Select 并使用 react-datepicker 仅选择 div 更新日期

Select and update date in only selected div using react-datepicker

javascript

reactjs

react-datepicker