Javascript 当同一个Datepicker组件在列表中多次迭代时，如何使React Datepicker状态独立？
我有一个组件，它通过单击按钮在列表中动态添加新字段，然后在填充所有字段时填充到一个对象数组中 以这种格式Javascript 当同一个Datepicker组件在列表中多次迭代时，如何使React Datepicker状态独立？,javascript,reactjs,ecmascript-6,create-react-app,react-datepicker,Javascript,Reactjs,Ecmascript 6,Create React App,React Datepicker,我有一个组件，它通过单击按钮在列表中动态添加新字段，然后在填充所有字段时填充到一个对象数组中 以这种格式 "prices": [ { "from": "2019-01-01", "to": "2019-06-30", "price": 1560 }, { "from": "2019-07-01", "to": "2019-09-30", "price": 2010 },
"prices": [
{
"from": "2019-01-01",
"to": "2019-06-30",
"price": 1560
},
{
"from": "2019-07-01",
"to": "2019-09-30",
"price": 2010
},
{
"from": "2019-10-01",
"to": "2019-12-31",
"price": 2010
}
],
import React，{Component}来自'React'；
从“反应日期选择器”导入日期选择器；
导入'react datepicker/dist/react datepicker.css'；
类品牌延伸组件{
建造师（道具）{
超级（道具）；
此.state={
价格：[{from:null，to:null，价格：0}]
}
this.handleAdd=this.handleAdd.bind（this）；
this.handleRemove=this.handleRemove.bind（this）；
this.handleChangePrices=this.handleChangePrices.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.handleChangeStart=this.handleChangeStart.bind（this）；
this.handleChangeEnd=this.handleChangeEnd.bind（this）；
}
handleChange=（值、名称）=>{
this.setState（this.state[name]=值）；
};
handleChangeStart（开始日期）{
this.setState（{startDate}）；
console.log（this.state.startDate）；
}
handleChangeEnd（结束日期）{
this.setState（{endDate}）；
console.log（this.state.endDate）；
}
手工更改价格（即，e）{
const prices=[…this.state.prices]；
价格[i]。价格=e.target.value；
价格[i].from=this.state.startDate；
价格[i].to=this.state.endDate；
这个.setState（{prices}）；
console.log（this.state.prices）；
const{price，from，to}=this.state.prices；
控制台日志（来自）；
if（from==未定义）{
log（“这是一个错误”）；
}
}
handleAdd（）{
this.setState（prevState=>({
prices:[…prevState.prices，{from:null，to:null，
价格：
null}]
}));
}
handleRemove（i）{
const prices=[…this.state.prices]；
价格.拼接（i，1）；
这个.setState（{prices}）；
}
handleSubmit（e）{
警报（“已提交名称：”+this.state.prices.join（“，
"));
console.log（this.state.prices）；
}
render（）{
{
const items=this.state.prices.map（（el，i）=>(
{/*
this.handleRemove（i）}className=“btn btn year btn font”>删除
年
*/}
从…起
日期
迄今为止
美元
这个.handleChangePrices（i，e）}
className=“需要输入波段价格mb-3/>
this.handleRemove（i）}className=“btn btn danger btn font”>
删除带
));
返回(
{items}
this.handleAdd（）}className=“btn btn success btn font”>添加
定价区间
this.handleSubmit（）}className=“btn btn绿色btn-
字体“>添加年份
)
}
}
}
出口默认品牌；
import React, { Component } from 'react';
import DatePicker from "react-datepicker";
import 'react-datepicker/dist/react-datepicker.css';
import { connect } from 'react-redux';
import { ErrorLabels } from '../ErrorLabels';
import { FormInput } from 'shards-react';
class Brand extends Component {
constructor(props) {
super(props);
this.state = {
prices: [{ from: null, to: null, price: "" }],
disabled: true
}
this.handleAdd = this.handleAdd.bind(this);
this.handleRemove = this.handleRemove.bind(this);
this.handleChangePrices = this.handleChangePrices.bind(this);
this.handleDateChange = this.handleDateChange.bind(this);
}
handleDateChange(dateName, dateValue, index) {
if (this.state.prices[index].price === 0) {
console.log("error on prices")
}
if (dateName === 'startDateTime') {
this.state.prices[index].from = dateValue;
this.setState({ startDate: dateValue });
return;
}
this.state.prices[index].to = dateValue;
this.setState({ endDate: dateValue });
this.props.setPrices(this.state.prices);
}
handleChangePrices(i, e) {
const prices = [...this.state.prices];
prices[i].price = e.target.value;
prices[i].from = this.state.startDate;
prices[i].to = this.state.endDate;
this.setState({ prices });
this.props.setPrices(this.state.prices);
}
handleAdd() {
if (this.state.prices.length <= 2) {
this.setState(prevState => ({
prices: [...prevState.prices, { from: null, to: null, price: null }]
}));
}
return;
}
handleRemove(i) {
const prices = [...this.state.prices];
prices.splice(i, 1);
this.setState({ prices: prices });
}
handleSubmit() {
this.props.setPrices(this.state.prices);
}
render() {
{
const items = this.state.prices.map(( i) => (
<div key={i}>
<div className="field-inputs__wrapper">
<div className="field-inputs__label">
</div>
<div className="field-inputs__form-input date">
<div className="date-picker-wrapper">
<div className="date-picker"> From Date
</div>
<div className="date-picker__individual">
<DatePicker
id="start-date-time"
name="startDateTime"
placeholderText="-"
className="form-control"
showDisabledMonthNavigation
selected={this.state.prices[i].from || null}
selectsStart
startDate={this.state.startDate}
endDate={this.state.endDate}
onChange={date => this.handleDateChange('startDateTime', date, i)}
autosuggest="off"
/>
</div>
</div>
<div className="date-picker-wrapper">
<div className="date-picker">To Date
</div>
<div className="date-picker__individual">
<DatePicker
id="end-date-time"
name="endDateTime"
className="form-control"
placeholderText="-"
showDisabledMonthNavigation
selected={this.state.prices[i].to || null}
selectsEnd
startDate={this.state.prices[i].from || null}
endDate={this.state.endDate}
onChange={date => this.handleDateChange('endDateTime', date, i)}
minDate={this.state.startDate}
autosuggest="off"
/>
</div>
</div>
<div className="date-picker-wrapper">
<div className="date-picker__individual">
<label className="label-unique band-price"> USD</label>
<ErrorLabels errors={this.props.errors} name="price" />
<FormInput type="number" min="0" placeholder="0" name="price" value={this.state.price} onChange={e => this.handleChangePrices(i, e)} className="input-band-price mb-3" required />
</div>
</div>
<div className="date-picker-wrapper">
<div className="date-picker__individual">
<div className="but-ons-brand-delete">
<span>
<div onClick={() => this.handleRemove(i)} className="btn btn-danger btn-font" > Delete Band</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
));
return (
<>
<div className="field-inputs__wrapper">
<div className="field-inputs__label">
</div>
<div className="field-inputs__form-input date">
</div>
</div>
{items}
<div className="field-inputs__wrapper">
<div className="field-inputs__label">
</div>
<div className="field-inputs__form-input date">
</div>
</div>
<div className="field-inputs__wrapper">
<div className="field-inputs__label">
</div>
<div className="field-inputs__form-input date">
<div className="button-brand">
<span>
<div onClick={() => this.handleAdd()} className="btn btn-success btn-font" > Add Pricing Band</div>
</span>
</div>
</div>
</div>
</>
)
}
}
}
const mapStateToProps = ({ posts }) => {
const { errors } = posts;
return {
errors,
}
}
export default connect(mapStateToProps)(Brand);
import React，{Component}来自'React'；
从“反应日期选择器”导入日期选择器；
导入'react datepicker/dist/react datepicker.css'；
从'react redux'导入{connect}；
从“../ErrorLabels”导入{ErrorLabels}；
从“碎片反应”导入{FormInput}；
类品牌延伸组件{
建造师（道具）{
超级（道具）；
此.state={
价格：[{from:null，to:null，价格：'}]，
残疾人士：对
}
this.handleAdd=this.handleAdd.bind（this）；
this.handleRemove=this.handleRemove.bind（this）；
this.handleChangePrices=this.handleChangePrices.bind（this）；
this.handleDateChange=this.handleDateChange.bind（this）；
}
handleDateChange（日期名称、日期值、索引）{
if（this.state.prices[index].price==0）{
控制台日志（“价格错误”）
}
如果（dateName=='startDateTime'）{
this.state.prices[index].from=dateValue；
this.setState（{startDate:dateValue}）；
重新
import React, { Component } from 'react';
import DatePicker from "react-datepicker";
import 'react-datepicker/dist/react-datepicker.css';
import { connect } from 'react-redux';
import { ErrorLabels } from '../ErrorLabels';
import { FormInput } from 'shards-react';
class Brand extends Component {
constructor(props) {
super(props);
this.state = {
prices: [{ from: null, to: null, price: "" }],
disabled: true
}
this.handleAdd = this.handleAdd.bind(this);
this.handleRemove = this.handleRemove.bind(this);
this.handleChangePrices = this.handleChangePrices.bind(this);
this.handleDateChange = this.handleDateChange.bind(this);
}
handleDateChange(dateName, dateValue, index) {
if (this.state.prices[index].price === 0) {
console.log("error on prices")
}
if (dateName === 'startDateTime') {
this.state.prices[index].from = dateValue;
this.setState({ startDate: dateValue });
return;
}
this.state.prices[index].to = dateValue;
this.setState({ endDate: dateValue });
this.props.setPrices(this.state.prices);
}
handleChangePrices(i, e) {
const prices = [...this.state.prices];
prices[i].price = e.target.value;
prices[i].from = this.state.startDate;
prices[i].to = this.state.endDate;
this.setState({ prices });
this.props.setPrices(this.state.prices);
}
handleAdd() {
if (this.state.prices.length <= 2) {
this.setState(prevState => ({
prices: [...prevState.prices, { from: null, to: null, price: null }]
}));
}
return;
}
handleRemove(i) {
const prices = [...this.state.prices];
prices.splice(i, 1);
this.setState({ prices: prices });
}
handleSubmit() {
this.props.setPrices(this.state.prices);
}
render() {
{
const items = this.state.prices.map(( i) => (
<div key={i}>
<div className="field-inputs__wrapper">
<div className="field-inputs__label">
</div>
<div className="field-inputs__form-input date">
<div className="date-picker-wrapper">
<div className="date-picker"> From Date
</div>
<div className="date-picker__individual">
<DatePicker
id="start-date-time"
name="startDateTime"
placeholderText="-"
className="form-control"
showDisabledMonthNavigation
selected={this.state.prices[i].from || null}
selectsStart
startDate={this.state.startDate}
endDate={this.state.endDate}
onChange={date => this.handleDateChange('startDateTime', date, i)}
autosuggest="off"
/>
</div>
</div>
<div className="date-picker-wrapper">
<div className="date-picker">To Date
</div>
<div className="date-picker__individual">
<DatePicker
id="end-date-time"
name="endDateTime"
className="form-control"
placeholderText="-"
showDisabledMonthNavigation
selected={this.state.prices[i].to || null}
selectsEnd
startDate={this.state.prices[i].from || null}
endDate={this.state.endDate}
onChange={date => this.handleDateChange('endDateTime', date, i)}
minDate={this.state.startDate}
autosuggest="off"
/>
</div>
</div>
<div className="date-picker-wrapper">
<div className="date-picker__individual">
<label className="label-unique band-price"> USD</label>
<ErrorLabels errors={this.props.errors} name="price" />
<FormInput type="number" min="0" placeholder="0" name="price" value={this.state.price} onChange={e => this.handleChangePrices(i, e)} className="input-band-price mb-3" required />
</div>
</div>
<div className="date-picker-wrapper">
<div className="date-picker__individual">
<div className="but-ons-brand-delete">
<span>
<div onClick={() => this.handleRemove(i)} className="btn btn-danger btn-font" > Delete Band</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
));
return (
<>
<div className="field-inputs__wrapper">
<div className="field-inputs__label">
</div>
<div className="field-inputs__form-input date">
</div>
</div>
{items}
<div className="field-inputs__wrapper">
<div className="field-inputs__label">
</div>
<div className="field-inputs__form-input date">
</div>
</div>
<div className="field-inputs__wrapper">
<div className="field-inputs__label">
</div>
<div className="field-inputs__form-input date">
<div className="button-brand">
<span>
<div onClick={() => this.handleAdd()} className="btn btn-success btn-font" > Add Pricing Band</div>
</span>
</div>
</div>
</div>
</>
)
}
}
}
const mapStateToProps = ({ posts }) => {
const { errors } = posts;
return {
errors,
}
}
export default connect(mapStateToProps)(Brand);