По умолчанию сегодняшняя дата в пике даты, использующем реагирование без использования компонента DatePicker

Question

В моем приложении со списком TODO у меня есть поле выбора даты с именем startDate, для которого я хочу, чтобы датой по умолчанию была текущая дата.

Вот код: я попытался определить defaultValue, но это дает мне ошибку как датуне определено.

Код выбора:

                  <Label for="start">Start Date</Label>
                  <Input
                    type="date"
                    name="startDate"
                    //defaultValue= {this.state.activeItem.date}
                    value={this.state.activeItem.startDate}
                    onChange={this.handleChange}
                  />
                </FormGroup>
                <FormGroup>
                  <Label for="end">End Date</Label>
                  <Input
                    type="date"
                    name="endDate"
                    value={this.state.activeItem.endDate}
                    onChange={this.handleChange}

Это код, который я написал для получения даты по умолчанию:

     curr.setDate(curr.getDate());
     var date = curr.toISOString().substr(0,10);

Я не понимаю, где выполнитьописанная выше операция внутри конструктора или метода визуализации.

Вот полный код класса

export default class CustomModal extends Component {
      constructor(props) {
        super(props);
        this.state = {
          activeItem: this.props.activeItem
        };
      }
      handleChange = e => {
        let { name, value } = e.target;
        if (e.target.type === "checkbox") {
          value = e.target.checked;
        }
        const activeItem = { ...this.state.activeItem, [name]: value };
        this.setState({ activeItem });
      };
      render() {
        const { toggle, onSave } = this.props;
        return (
          <Modal isOpen={true} toggle={toggle}>
            <ModalHeader toggle={toggle}> Todo Item </ModalHeader>
            <ModalBody>
              <Form>
                <FormGroup>
                  <Label for="title">Title</Label>
                  <Input
                    type="text"
                    name="title"
                    value={this.state.activeItem.title}
                    onChange={this.handleChange}
                    placeholder="Enter Todo Title"
                  />
                  <FormGroup>
                  <Label for="start">Start Date</Label>
                  <Input
                    type="date"
                    name="startDate"
                    //defaultValue= {this.state.activeItem.date}
                    value={this.state.activeItem.startDate}
                    onChange={this.handleChange}
                  />
                </FormGroup>
                <FormGroup>
                  <Label for="end">End Date</Label>
                  <Input
                    type="date"
                    name="endDate"
                    value={this.state.activeItem.endDate}
                    onChange={this.handleChange}
                  />
                </FormGroup>
                </FormGroup>
                <FormGroup>
                  <Label for="description">Description</Label>
                  <Input
                    type="text"
                    name="description"
                    value={this.state.activeItem.description}
                    onChange={this.handleChange}
                    placeholder="Enter Todo description"
                  />
                </FormGroup>
                <FormGroup check>
                  <Label for="completed">
                    <Input
                      type="checkbox"
                      name="completed"
                      checked={this.state.activeItem.completed}
                      onChange={this.handleChange}
                    />
                    Completed
                  </Label>
                </FormGroup>
              </Form>
            </ModalBody>
            <ModalFooter>
              <Button color="success" onClick={() => onSave(this.state.activeItem)}>
                Save
              </Button>
            </ModalFooter>
          </Modal>
        );
      }
    }

Answer 1

Один из способов сделать это:

export default class CustomModal extends Component {
      constructor(props) {
        super(props);

        var date = new Date();

        var formatedDate = `${date.getMonth()+1}-${date.getDate()}-${date.getFullYear()}`

        this.state = {
          // Use object destructuring to create a new object with the default value
          activeItem: {
            startDate: formatedDate
            // But if the startDate exists on the prop item, it will be replaced.
            ...this.props.activeItem
          }
        };
      }
      //...

Но он устанавливает значение по умолчанию только один раз, если вы хотите сохранить его для последующего использования, просто добавьте его в состояние и используйте defaultValue какпробовал раньше.

export default class CustomModal extends Component {
      constructor(props) {
        super(props);
        // Assuming that this code gives you the date on the right format

        var date = new Date();

        var formatedDate = `${date.getMonth()+1}-${date.getDate()}-${date.getFullYear()}`

        this.state = {
          startingDate: formatedDate,
          activeItem: {
...
          <Input
            type="date"
            name="startDate"
            defaultValue={this.state.startingDate}
            value={this.state.activeItem.startDate}
            onChange={this.handleChange}
          />
...