React Datepicker - встроенный стиль не работает - PullRequest
Новая
       367

React Datepicker - встроенный стиль не работает

0 голосов
/ 07 августа 2020

Я запускаю функцию onBlur javascript, чтобы сделать границу входов красной, если запись недействительна.

Это работает нормально, за исключением Datepicker.

Я могу стилизовать его границу используя имя класса, но мне нужно использовать встроенный стиль, чтобы он изменялся в зависимости от того, что вводится. Как я могу это сделать?

Мой код: 

state= {
    borderColors:{
        startDetails: 'none',
    }
}

borderColor = (e, field) => {
    e.preventDefault()
    let borderColors = this.state.borderColors
    e.target.value === '' ? borderColors[field] = 'tomato' : borderColors[field] = '#00988f'
    this.setState({borderColors})
}



  <DatePicker
     className="datePicker"
     timeIntervals={15}
     selected={values.startDetails}
     onBlur = {event => this.borderColor(event, 'startDetails')}
     onChange={(event) => this.props.changeField(event, "startDetails")}
     showTimeSelect
     dateFormat="d MMM yyyy HH:mm"
     required
     placeholderText={'Date & Time Event Starts'}
     style={{borderColor: this.state.borderColors.startDetails}}
     />

1 Ответ

0 голосов
/ 08 августа 2020

Я работал над этим, удалив границу вокруг datePicker, установив его ширину равной нулю в css файле.

Затем я обернул datePicker в div, дал ему границу и установил встроенный стиль в div, чтобы установить цвет границы в соответствии со значением в состоянии, которое задается функцией

...