Я пытаюсь создать React SPA для следующего случая: School -Student1 -Student2 -Student3 -name -Address - номер дома, улица, город, штат, страна.
Если я считаю, «Школа», «Студент», «Адрес» реагирующими компонентами. Школа: содержит / отображает список учеников, которых можно добавлять и удалять. Учащийся: содержит / отображает информацию, такую как имя, адрес, которую можно изменить. Адрес: содержит / отображает информацию об адресе, которую можно изменить.
Теперь, как я могу здесь управлять состоянием, скажем, если пользователь изменяет адрес одного из учеников, как это может отразиться на школе.
варианты, о которых я мог подумать: 1. использовать Redux, но скажу, что я хочу создать эту школу как компонент, который будет использоваться в другом приложении для реагирования, смогу ли я использовать хранилище redux на уровне компонентов.
- передайте объект Student компоненту реакции Student, который обновит его информацией при изменении .. изменение свойств.
Примечание: я новичок в реакции, извините, что я написал неправильно или не имеет смысла.
import * as React from 'react';
export default class School extends React.Component {
constructor(props) {
super(props);
this.state = {
schoolName: "test school",
students: [],
update:false
}
}
handleAddStudent = ()=>{
let student = {
name : "student1",
className: "class1",
address:{
houseNumber : "1-2/A-3",
street: "street1",
city: "city1",
country: "country1"
}
}
this.state.students.push(student);
this.setState({ update: true});
}
handleToJson = () => {
console.log(JSON.stringify(this.state));
}
render() {
return (
<div>
<ul>{
this.state.students.map((student)=>{
return <Student student={student}/>
})
}
</ul>
<button onClick={this.handleAddStudent}>Add Student </button>
<br/>
<button onClick={this.handleToJson}>To json</button>
</div>
);
}
}
export class Student extends React.Component {
constructor(props) {
super(props);
this.state = {
studentName: this.props.student.name,
className: this.props.student.className,
address: this.props.student.address
}
}
handleChange = (e)=>{
const value = e.target.value;
switch(e.target.name)
{
case 'studentName':
this.setState({ studentName: value});
this.props.student.name = value;
break;
case 'className':
this.setState({ className: value });
this.props.student.className = value;
break;
}
}
render() {
return (
<div>
<input name='studentName' value={this.state.studentName} onChange={this.handleChange} />
<input name='className' value={this.state.className} onChange={this.handleChange} />
<Address name='address' address={this.state.address}/>
</div>
);
}
}
export class Address extends React.Component {
constructor(props) {
super(props);
this.state = {
houseNumber: this.props.address.houseNumber,
street: this.props.address.street,
city: this.props.address.city,
country: this.props.address.country
}
}
handleChange = (e) => {
const value = e.target.value;
switch (e.target.name) {
case 'houseNumber':
this.setState({ houseNumber: value });
this.props.address.houseNumber = value;
break;
case 'street':
this.setState({ street: value });
this.props.address.street = value;
break;
case 'city':
this.setState({ city: value });
this.props.address.city = value;
break;
case 'country':
this.setState({ country: value });
this.props.address.country = value;
break;
}
}
render() {
return (
<div>
<input name='houseNumber' value={this.state.houseNumber} onChange={this.handleChange} />
<input name='street' value={this.state.street} onChange={this.handleChange} />
<input name='city' value={this.state.city} onChange={this.handleChange} />
<input name='country' value={this.state.country} onChange={this.handleChange} />
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Спасибо
