componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
},
handleScroll=(event)=> {
var hiddenInput = document.createElement("mainNav");
hiddenInput.setAttribute("className", "nav-scrolled nav-scrolled-links top_nums");
},
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';
import Button from './components/Button';
import AddTaskInput from './components/Input';
import MainHeader from './components/Header';
import Task from './components/Task';
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: 'Новая задача'
}
this.NewTask = this.NewTask.bind(this);
}
NewTask(){
}
render() {
return (
<div className="App">
<HeaderWrapper>
<MainHeader />
</HeaderWrapper>
<Wrapper>
<AddTaskInput />
<Button onClick={this.NewTask} text="Add" />
</Wrapper>
<TasksWrapper>
<Task taskName={this.state.items}/>
</TasksWrapper>
</div>
);
}
}
export default App;
const logInWithLoagInAndPassword = (login, password, organization, rememberMe) => {
return dispatch => {
return fetch(BASE_URL + '?username=' + login + '&password=' + password + '&customer=' + organization + '&remember=' + remember + '&login=Inloggen&ajax=1', {
method: 'GET',
headers: {
"Access-Control-Allow-Origin": "*"
}
}).then(response => {
return response.json();
}).then(json => {
if (rememberMe) {
localStorage.setItem('sessionid', json.sessionid)
localStorage.setItem('auth', JSON.stringify(json))
} else {
//clear localstorage
}
dispatch({type: AUTH_SUCCESS, payload: json})
}
)
.catch(error => {
console.error('error', error)
dispatch({type: AUTH_ERROR, payload: error})
});
}
}
class MainPage extends Component {
constructor(props) {
super(props);
this.state = {
newPerson: {
}
};
this.getInputNameValue = this.getInputNameValue.bind(this);
this.getInputSurnameValue = this.getInputSurnameValue.bind(this);
this.getInputCityValue = this.getInputCityValue.bind(this);
this.addToDatabase = this.addToDatabase.bind(this);
}
setNewPerson=(user)=>{
this.setState({
newPerson:user
})
}
addToDatabase() {
fetch(`http://127.0.0.1:3000/add/${this.state.newPerson}`, {
method: 'PUT'
})
<...>
}
render() {
return (
<div>
<InputForm setNewPerson={this.setNewPerson} />
<Footer addToDatabase={this.addToDatabase}/>
</div>
);
}
}
class InputForm extends Component {
constructor(props) {
super(props);
this.state = {
user:{
nameP: '',
surnameP: '',
cityP: '',
value: ''
}
};
this.handleNameChange = this.handleNameChange.bind(this);
this.handleSurnameChange = this.handleSurnameChange.bind(this);
this.handleCityChange = this.handleCityChange.bind(this);
}
handleNameChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{nameP:event.target.value})
this.setState({ user: newUser });
this.props.setNewPerson(this.state.user);
}
handleSurnameChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{surnameP:e.target.value})
this.setState({ user: newUser });
this.props.setNewPerson(this.state.user)
}
handleCityChange(event) {
let user = this.state.user
let newUser = Object.assign(user,{cityP:e.target.value})
this.setState({ user: newUser });
this.props.setNewPerson(this.state.user)
}
render() {
return (
<form className='row form'>
<label className='col-4 form__label' htmlFor='surnameMembers'>Фамилия</label>
<input className='col-6 form-control' id='surnameMembers' name='surnameMembers'
type='text' required value={this.state.surnameP}
onChange={this.handleSurnameChange}
/>
<label className='col-4 form__label' htmlFor='nameMembers'>Имя</label>
<input className='col-6 form-control' id='nameMembers' name='nameMembers'
type='text' required value={this.state.nameP}
onChange={this.handleNameChange}
/>
<label className='col-4 form__label' htmlFor='cityMembers'>Город</label>
<input className='col-6 form-control' id='cityMembers' name='cityMembers'
type='text' required value={this.state.cityP}
onChange={this.handleCityChange}
/>
</form>
);
}
}