Условно укажите реквизит компонента - PullRequest
Новая
       3

Условно укажите реквизит компонента

0 голосов
/ 20 марта 2020

Я хотел бы включить свойство showTimeSelect в компонент ReactDatePicker ниже, если {type} === 'dateTime', в противном случае я хочу его опустить, но в настоящее время он не работает. Я новичок в React, поэтому был бы признателен за рекомендации, как заставить это работать.

Цель этого заключается в том, что я использую ReactDatePicker в форме, а иногда мне бы хотелось, чтобы показывать как указатель даты, а иногда я хочу, чтобы он отображался как указатель времени. Это можно сделать, добавив одно свойство к компоненту ReactDatePicker, а именно showTimeSelect. 

import React from 'react';
import ReactDatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { Controller } from 'react-hook-form';
function FormDate({ name, question, register, control, type }) {

  const varShowTimeSelect = ({ type }) =>
    ({ type } === 'dateTime' ? { showTimeSelect } : {});

  return (
    <div className="form-group">
      <label htmlFor={name}>{question}</label>
      <div className="input-group date col-xs-5">
        <Controller
          as={
            <ReactDatePicker
              dateFormat="dd/MM/yyyy"
              placeholderText="Select date"
              {varShowTimeSelect} //Conditionally show showTimeSelect prop
            />
          }
          control={control}
          name={name}
          ref={register}
          id={name}
          valueName="selected"
          onChange={([selected]) => selected}
        />
      </div>
    </div>
  );
}
export default FormDate;

Большое спасибо,

Kat ie

Ответы [ 2 ]

2 голосов
/ 20 марта 2020

Добавьте условие в значение свойства, так как showTimeSelect принимает тип boolean: 

<ReactDatePicker
  dateFormat="dd/MM/yyyy"
  placeholderText="Select date"
  showTimeSelect={type === 'dateTime'}
/>

function FormDate({ name, question, register, control, type }) {
  return (
    <div className="form-group">
      <label htmlFor={name}>{question}</label>
      <div className="input-group date col-xs-5">
        <Controller
          as={
            <ReactDatePicker
              dateFormat="dd/MM/yyyy"
              placeholderText="Select date"
              showTimeSelect={type === 'dateTime'}
            />
          }
          control={control}
          name={name}
          ref={register}
          id={name}
          valueName="selected"
          onChange={([selected]) => selected}
        />
      </div>
    </div>
  );
}
1 голос
/ 20 марта 2020

В дополнение к тому, что предложил Деннис (который, я думаю, является лучшим решением в данном случае), если вы хотите условно не пропустить пропелу на всех , вы захотите использовать спред : 

function FormDate({ name, question, register, control, type }) {

  const showTimeSelectProps = type === 'dateTime' ? { showTimeSelect: true } : {};

  return (
    <div className="form-group">
      <label htmlFor={name}>{question}</label>
      <div className="input-group date col-xs-5">
        <Controller
          as={
            <ReactDatePicker
              dateFormat="dd/MM/yyyy"
              placeholderText="Select date"
              {...showTimeSelectProps} //Conditionally show showTimeSelect prop
            />
          }
          control={control}
          name={name}
          ref={register}
          id={name}
          valueName="selected"
          onChange={([selected]) => selected}
        />
      </div>
    </div>
  );
}
...