javascript - 带有值的输入不允许改变自身

问题描述

我有输入，在其中我有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()

我的问题是

value和onChange变量应该相等
value并且onChange变量不应该是new Date(e.target.value)，因为它不允许您从字符串中删除某些内容，如果您想更改它，您应该突出显示一个字母并打印一个替代品。
我的目标是使用发送更改onBlur，所以在其中我只需使用new Date(value)我打印的值

标签： javascriptreactjsdateinput

javascript - 带有值的输入不允许改变自身

问题描述

解决方案

推荐阅读