使用react-datepicker仅在选定的div中选择和更新日期

Question

I am developing a react application. I have 3 div, each have DatePicker component. I want to update the date of selected. When I change the date, it gets updated every div.

Here is code -

 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

Here is how can you do it.

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;

Answer 2

For doing this, you need to provide a key and value in the state for each one

 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;