ввод со значением не позволяет изменить себя

Question

У меня есть вход, и внутри него у меня есть value={this.state.date} Я не могу ввести этот ввод, когда значение все еще там.

Я пытался использовать вторую переменную this.state.subdate, чтобы сначала изменить ее, но это не дало никакого эффекта. Я попытался заполнить, но это свойство не может сделать необходимые вещи.

import React, {Component} from 'react';
import {
Col,
Button,
FormGroup,
Input,
Popover, 
Row
 } from "reactstrap";
import Calendar from 'react-calendar';
import moment from 'moment';
import { spawn } from 'child_process';

let id = 0;
function idGen(){
    return 'ds_select_'+(id++)
}

export default class Datetime extends Component{

    state={
    date: new Date(),
    isOpen : false,
    hours : '',
    minutes : '',
    subdate : '',
    }

onChange(e){
    e.setHours(this.state.date.getHours())
    e.setMinutes(this.state.date.getMinutes())
    this.setState({ date : e })
    //this.props.onChange({name : this.props.name, value : this.dateMs(e)})
} 



constructor(props){
    super(props);
    this.id = idGen();
}
componentDidMount(){
    var da = new Date()
    this.setState({date : da, hours : da.getHours(), minutes : da.getMinutes(), subdate : da })
}

close(){
    this.setState({isOpen : !this.state.isOpen})
}
render(){
    return(<>
        {this.renderInput()}
        {this.renderCalendar()}
    </>)
}
dateMs(date){
    return Date.parse(date)
}
renderInput(){
    return(
        <Input 
        onBlur={(e) => {console.log('blur',e.target.value);
        this.setState({date : new Date(this.state.subdate),
            hours : new Date(this.state.subdate).getHours(),
            minutes :new Date(this.state.subdate).getMinutes()})}} 
        onClick={() => this.setState({isOpen : !this.state.isOpen})} 
        id={this.id}  type="text" name="date" placeholder={this.state.subdate} value={this.state.date}
        onChange={ e => {this.setState({subdate : e.target.value},() => {console.log(this.state.subdate)})}}    />
    )
}

renderCalendar(){
    return(
        <Popover id={'_'+this.id} placement="bottom-start"  hideArrow offset={0} isOpen={this.state.isOpen} target={this.id} toggle={() =>this.close()}>
            <Row style={{display: 'inline-grid', gridTemplateColumns:'360px 250px'}} form>
                <Col md={12}>
                    <FormGroup style={{marginBottom:'0px'}}>
                        <Calendar
                            onChange={(e) => this.onChange(e)}
                            e={this.onChange}
                            value={this.state.date}
                        />
                    </FormGroup>
                </Col>
                <Col style={{gridColumnStart: 2}} md={10}>
                    <FormGroup row>
                        <Col sm={6}>
                            <Input valid={this.state.hours >= 0 && this.state.hours <= 23} id={this.id+'hours'}
                            style={{textAlign:'center'}} type='number' max='23' min='0' name='hours' id='hours' placeholder={23}
                            value={this.state.hours}
                            onChange={e => {
                                var dat = this.state.date;
                                dat.setHours(e.target.value);
                                this.setState({date : dat, hours : e.target.value, subdate : dat})
                            }} />
                        </Col>
                        <Col sm={6}>
                            <Input valid={this.state.minutes >= 0 && this.state.minutes <= 59} id={this.id+'minutes'}
                            style={{textAlign:'center'}} type='number' max='59' min='0' name='minutes' id='minutes'
                            placeholder={23} value={this.state.minutes}
                            onChange={e => {
                                var dat = this.state.date;
                                dat.setMinutes(e.target.value);
                                this.setState({date : dat, minutes : e.target.value, subdate : dat})
                            }} />
                        </Col>                  
                    </FormGroup>

                </Col>
            </Row>
        </Popover>
    )
}
}

вероятно, это простые вопросы, потому что мне просто нужно свойство ввода, например value \ placeholder, но с некоторыми другими функциями, которые позволяют ему быть реальным (поэтому я могу редактировать эту вещь с помощью клавиатуры) и изменить его с помощью this.setState()

Мои проблемы были

1. value и onChange переменная должна быть равна

2. value и onChange не должна быть new Date(e.target.value), потому что она не позволяет вам удалять что-либо из строки, если вы хотите изменить это, вы должны выделить букву и напечатать замену.

3. моя цель состояла в том, чтобы отправить изменения с onBlur, поэтому внутри него я бы просто сделал new Date(value) из значения, которое я напечатал

Answer 1

Пожалуйста, проверьте мою скрипку, чтобы узнать, как добиться обновления даты в реальном времени:

Изменить час

Вы можете изменить логику соответственно. Но состояние установки должно следовать методу, описанному в моей скрипке.

Очень простое правило установки состояния для конкретного входа заключается в том, что onChange влияет на ваше входное значение только тогда, когда ваши setting state и assigned value state одинаковы.

Надеюсь, это поможет.