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，但是具有一些其他功能，使它可以是真实的（因此我可以通过键盘编辑此内容）并可以通过{{1 }}

我的问题是

this.setState()和value变量应相等
onChange和value变量不应为onChange，因为它不允许您从字符串中删除某些内容，如果要更改它，则应突出显示字母和打印替代品。
我的目标是使用new Date(e.target.value)发送更改，因此在其中，我只是根据打印出的值制作onBlur

Answer 1

请检查我的小提琴以了解如何实现实时日期更新：

Change Hour

您可以相应地更改逻辑。但是设置状态必须遵循我的提琴中描述的方法。

为特定输入设置状态的非常基本的规则是，onChange仅在setting state和assigned value state相同时才影响输入值。

希望这会有所帮助。

具有值的输入不允许更改自身

1 个答案: