当我更改其中一个时,为什么所有的datepicker值都变为null?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当我更改其中一个时,为什么所有的datepicker值都变为null?相关的知识,希望对你有一定的参考价值。

我从数据库中获取值并将其保存在stateEvent状态:

class FormEditPage extends Component {
  constructor(props) {
    super(props);
    this.state = {      
      enteredEvent: {
        name: '',
        date: new Date(),
        time: '',
        place: '',        
        datepub: new Date()
      },      
    };
    ...
  }

  componentDidMount() {    
      this.onHandleEventOneFetch(idEvent);     
  }

  handleChangeInputName(newValue) {
    this.setState({ enteredEvent: { name: newValue } });
  }

  handleChangeInputDate(newValue) {
    this.setState({ enteredEvent: { date: newValue } });
  }

  handleChangeInputTime(newValue) {
    this.setState({ enteredEvent: { time: newValue } });
  }

  handleChangeInputPlace(newValue) {
    this.setState({ enteredEvent: { place: newValue } });
  }  

  handleChangeInputDatepub(newValue) {
    this.setState({ enteredEvent: { datepub: newValue } });
  }

  onHandleEventOneFetch(id) {
    fetch(..., {
      method: 'GET'
    })
        ...
        .then(data =>
            this.setState({
              enteredEvent: {
                name: data[0].name,
                date: new Date(data[0].date),
                time: data[0].time,
                place: data[0].place,                
                datepub: new Date(data[0].datepub)
              }
            })
        );
  }  

  render() {
    return (
      <div>        
              <FormEvent
                enteredEvent={this.state.enteredEvent}
                onHandleChangeInputName={this.handleChangeInputName}
                onHandleChangeInputDate={this.handleChangeInputDate}
                onHandleChangeInputTime={this.handleChangeInputTime}
                onHandleChangeInputPlace={this.handleChangeInputPlace}
                onHandleChangeInputDatepub={this.handleChangeInputDatepub}
              />          
      </div>
    );
  }
}

在这个组件中添加了datepicker和timepicker:

import DatePicker from 'react-date-picker';
import TimePicker from 'react-time-picker';

class FormEvent extends Component {
  constructor(props) {
    super(props);    
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleDateChange = this.handleDateChange.bind(this);
    this.handleTimeChange = this.handleTimeChange.bind(this);
    this.handlePlaceChange = this.handlePlaceChange.bind(this);
    this.handleDatepubChange = this.handleDatepubChange.bind(this);   
  }

  handleNameChange(event) {
    this.props.onHandleChangeInputName(event.target.value);
  }

  handleDateChange(newDate) {
    this.props.onHandleChangeInputDate(newDate);
  }

  handleTimeChange(newTime) {
    this.props.onHandleChangeInputTime(newTime);
  }

  handlePlaceChange(event) {
    this.props.onHandleChangeInputPlace(event.target.value);
  }

  handleDatepubChange(newDatepub) {
    this.props.onHandleChangeInputDatepub(newDatepub);
  }

  render() {
    return (
      <div>        
       <input type='text' required value={this.props.enteredEvent.name} onChange={this.handleNameChange}/>            
       <DatePicker onChange={this.handleDateChange} value={this.props.enteredEvent.date}/>            
       <TimePicker onChange={this.handleTimeChange} value={this.props.enteredEvent.time}
       <input type='text' value={this.props.enteredEvent.place} onChange={this.handlePlaceChange}/>
       <DatePicker onChange={this.handleDatepubChange} value={this.props.enteredEvent.datepub}/>
      </div>
    );
  }

 FormEvent.propTypes = {  
   enteredEvent: PropTypes.object,
   onHandleChangeInputName: PropTypes.func,
   onHandleChangeInputDate: PropTypes.func,
   onHandleChangeInputTime: PropTypes.func,
   onHandleChangeInputPlace: PropTypes.func,  
   onHandleChangeInputDatepub: PropTypes.func
};
}

结果所有datepickers和timepicker从enteredEvent获取值。当我更改datepicker / timepicker之一的值时,其他日期选择器和timepicker中的值变为null。我该如何解决?

答案

当你有一个嵌套对象处于状态时,你必须确保创建一个当前处于状态的对象的副本,否则它将被一个只有给定属性的新对象覆盖。

handleChangeInputName(newValue) {
  this.setState(previousState => ({
    enteredEvent: { ...previousState.enteredEvent, name: newValue }
  }));
}
另一答案

您已将状态设置为嵌套对象,并且在设置状态时,您将覆盖整个对象。您将需要将对象与先前状态合并,或者停止使用嵌套对象。 React会对状态进行浅层合并,但不会进行深度合并。

如果您可以使用对象扩展语法,那么自己进行合并将如下所示:

this.setState(oldState => ({ 
  enteredEvent: { 
    ...oldState.enteredEvent,
    name: newValue 
  }
});

如果您不支持对象扩展语法,那么可以这样做:

this.setState(oldState => ({ 
  enteredEvent: Object.assign({}, oldState.enteredEvent, {name: newValue})
});

如果你想要采用扁平化状态的方法,它看起来像这样:

this.state = {      
  name: '',
  date: new Date(),
  time: '',
  place: '',        
  datepub: new Date()
};

// ...

this.setState({ name: newValue });

以上是关于当我更改其中一个时,为什么所有的datepicker值都变为null?的主要内容,如果未能解决你的问题,请参考以下文章

为啥 datepicker 值没有改变?

更改元素 ID 时 Datepicker 失去绑定

如何通过 Intent 初始化 Android DatePicker?

jQuery Datepicker:setDate 不是函数

当用户更改月份时,jquery datepicker 更改年份

自定义 WPF DatePicker 掩码