aleksand44
@aleksand44

Как сделать кнопку сброса строки в input?

Столкнулся с проблемой.
Есть input и кнопка очистки строки в нем, которая очищает содержимое инпута и показывается при: 1) при фокусе на инпут; 2) если в инпут хоть что-то введено.
Основная проблема - это конфликт, возникающий когда пытаешься кликнуть по кнопке. Так как она завязана на фокус инпута, то при клике на ней, он моментально теряется и кнопка исчезает, не давая выполниться функции, завязанной на кнопку.
  • Вопрос задан
  • 278 просмотров
Решения вопроса 1
aleksand44
@aleksand44 Автор вопроса
Помогло свойство объекта event - relatedTarget.
validateField(e){//функция-валидация            relatedTarget: button.clear-field
        if(e.relatedTarget.classList.contains("clear-field"))return;
        this.hideHint(); //прячем окно с подсказкой
        let value = this.state.value;//e.target.value;
        if(value === ''){
            this.props.fieldIsValid('email',null);
            return;
        }
        let regExp = new RegExp('^[a-zA-Zа-яА-Я0-9-_\.@]{3,30}$');
        if(!regExp.test(value)){   //проверка на соответствие регэкспу
            this.setState({isValid:false});
            this.props.fieldIsValid('email',false);
        }
        else{
            this.setState({isValid:true});
            this.props.fieldIsValid('email',value);
        }
        this.checkAvailability();
    }

    render() {
        return (
            <div className="form-group">
                <label>
                    {animateDynamicLabel(this.state.value, 'E-mail')}
                    <input
                           onChange={this.setValue.bind(this)}
                           onFocus={this.setHint.bind(this)}
                           onBlur={this.validateField.bind(this)}
                           value={this.state.value}
                           className={"form-control " + ( (this.state.isValid === false) ? 'hasErrors' : '') }
                           type="text"
                           placeholder="Адрес E-mail"
                    />
                    <ClearField render={this.state.value && this.state.focus} clearField={this.clearField.bind(this)}/>
                    {this.showError()}
                </label>
            </div>
        )
    }
}

export default EmailInput;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы