Как сделать запрет на добавление такого же объекта? И как сделать проверку на year>1900?
import React, {Component} from 'react';
import './App.css';
import Car from './Car/Car'
class App extends Component {
constructor(props) {
super(props);
this.state = {
cars: [],
pageTitle: 'React components',
showCars: true,
inputValues: {name: "", year: ""}
}
}
toggleCarsHandler = () => {
this.setState({
showCars: !this.state.showCars
})
}
onChangeHandler = e => {
debugger;
this.setState({
inputValues: {...this.state.inputValues, [e.target.name]: e.target.value}
})
};
onSubmitHandler = e => {
e.preventDefault();
this.setState({
cars: [...this.state.cars, {name: this.state.inputValues.name, year: this.state.inputValues.year}]
})
};
onChangeName(name, index) {
const car = this.state.cars[index]
car.name = name
const cars = [...this.state.cars]
cars[index] = car
this.setState({cars})
}
deleteHandler(index) {
const cars = this.state.cars.concat()
cars.splice(index, 1)
this.setState({cars})
}
render() {
const divStyle = {
textAlign: 'center'
}
let cars = null;
if (this.state.showCars) {
cars = this.state.cars.map((car, index) => {
return (
<Car
key={index}
name={car.name}
year={car.year}
onDelete={this.deleteHandler.bind(this, index)}
onChangeName={event => this.onChangeName(event.target.value, index)}
/>
)
})
}
return (
<div style={divStyle}>
<h1>{this.props.title}</h1>
<li><a href="/about">About page</a></li>
<br/>
<button
onClick={this.toggleCarsHandler}
>Toggle cars
</button>
<form onSubmit={this.onSubmitHandler}>
<input
onChange={this.onChangeHandler}
name="name"
type="text"
placeholder={"name"}
value={this.state.inputValues.name}
/>
<input
onChange={this.onChangeHandler}
name="year"
type="text"
placeholder={"year"}
value={this.state.inputValues.year}
/>
<button type="submit" onClick={this.toggleMyCarsHandler}>Add car</button>
</form>
<div style={{
width: 400,
margin: 'auto',
paddingTop: '20px'
}}>
{cars}
</div>
</div>
);
}
}
export default App;