import React from "react";
import UIkit from "uikit";
import ReactDOM from "react-dom"
class PlaceUpdater extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
description: "",
count_of_day: 0,
low_price: 0,
high_price: 0,
// photo: null, TODO--FIRST сделать добавление фото и тегов
// tags: null
};
this.onChange = this.handleChange.bind(this)
}
handleChange (event) {
this.setState({
[event.target.name]: event.target.value
});
};
handleSubmit(event) {
//TODO make form request here
}
render() {
var bar = document.getElementById("js-progressbar");
UIkit.upload(".js-upload", {
url: "",
multiple: false,
beforeSend: function() {
console.log("beforeSend", arguments);
},
beforeAll: function() {
console.log("beforeAll", arguments);
},
load: function() {
console.log("load", arguments);
},
error: function() {
console.log("error", arguments);
},
complete: function() {
console.log("complete", arguments);
},
loadStart: function(e) {
console.log("loadStart", arguments);
bar.removeAttribute("hidden");
bar.max = e.total;
bar.value = e.loaded;
},
progress: function(e) {
console.log("progress", arguments);
bar.max = e.total;
bar.value = e.loaded;
},
loadEnd: function(e) {
console.log("loadEnd", arguments);
bar.max = e.total;
bar.value = e.loaded;
},
completeAll: function() {
console.log("completeAll", arguments);
setTimeout(function() {
bar.setAttribute("hidden", "hidden");
}, 1000);
alert("Upload Completed");
}
});
return (
<div>
<div id="modal-example" uk-modal="">
<div className="uk-modal-dialog uk-modal-body">
<form onSubmit={this.handleSubmit}>
<div className="uk-margin" id="input_name">
<input
value={this.state.name}
name="name"
className="uk-input"
type="text"
placeholder="Название"
onChange={this.handleChange}
/>
</div>
<div className="uk-margin" id="input_description">
<input
value={this.state.description}
name="description"
className="uk-input uk-width-1-1"
type="text"
placeholder="Описание"
onChange={this.handleChange}
/>
</div>
<div className="uk-margin" id="input_count_day">
<input
value={this.state.count_of_day}
name="count_of_day"
className="uk-input uk-width-1-1"
type="text"
placeholder="Количество дней"
onChange={this.handleChange}
/>
</div>
<div className="uk-margin" id="input_count_day">
<input
value={this.state.low_price}
name="low_price"
className="uk-input uk-width-1-2"
type="text"
placeholder="Минимальная стоимость"
onChange={this.handleChange}
/>
<input
value={this.state.high_price}
name="high_price"
className="uk-input uk-width-1-2"
type="text"
placeholder="Максимальная стоимость"
onChange={this.handleChange}
/>
</div>
{/* <div className="uk-margin" id="input_count_day">
<input
className="uk-input uk-width-1-1"
type="text"
placeholder="Спец-цена"
/>
</div>
<div className="uk-margin" id="input_count_day">
<input
className="uk-input uk-width-1-1"
type="text"
placeholder="Спец-описание"
/>
</div>
<div className="uk-margin" id="input_count_day">
<input
className="uk-input uk-width-1-1"
type="text"
placeholder="теги"
/>
</div> */}
{/* Add PHOTOS */}
{/* <div className="js-upload" uk-form-custom="">
<input type="file" name="file" multiple={true} />
<button
value={this.state.photo}
name="photo"
className="uk-button uk-button-default"
type="button"
tabIndex="-1"
handleChange={this.handleChange}
>
Выбрать фото
</button>
</div>
<progress
id="js-progressbar"
className="uk-progress"
value="0"
max="100"
hidden=""
/> */}
</form>
<p className="uk-text-right">
<button
className="uk-button uk-button-default uk-modal-close"
type="button"
>
Отмена
</button>
<button className="uk-button uk-button-primary" type="button">
Сохранить
</button>
</p>
</div>
</div>
</div>
);
}
}
export default PlaceUpdater;
при изменении импута какого либо, возникает ошибка - Cannot read property 'setState' of undefined.
Спасибо @ThisMan (см. коменты) handleChange в инпутах заменить на onChange
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Менеджер паролей изменяет шрифт, когда наводишь на какой-нибудь айтемКак можно этого избежать? Сталкивался кто? Два скриншота прилагаю
Всем привет!Сделал приложение на vueВыкладываю проект на github pages и начинаются проблемы с css,а главный фокус в том , что некоторые стили работают...
Как добавить иконку в менюшку на сайт? Как на картинке точки перед: новости, пресса ит