Просто для начала, я новичок в React, поэтому я пытаюсь научиться проходить мимо реквизиты и размещать различные функции в разных компонентах. Я застрял на этом весь день, пытаясь понять это.
У меня есть приложение, которое позволяет мне добавлять список клиентов путем ввода. У меня также есть еще один компонент, который позволяет мне выбрать одного из существующих клиентов из выпадающего меню и создать с ними «новый урок». Таким образом, я могу записывать свои уроки, сделанные с моими клиентами. Это все прекрасно работает ... вот где я застреваю.
Каждый раз, когда я добавляю новый урок, я хочу взять продолжительность урока (в часах) и умножить его на цену соответствующего клиента. Затем я хочу иметь возможность отображать эту прибыль, и каждый раз, когда я добавляю новый урок с новой прибылью, я хочу, чтобы все это складывалось в общую прибыль всех уроков.
У меня есть различные компоненты, которые я опубликую здесь, чтобы вы могли взглянуть, я пытаюсь выяснить, как сделать этот расчет, но я думаю, что я не передаю реквизиты и правильно использую функции. Спасибо за помощь!
это App.js
import React, { Component } from 'react'
import Clients from './components/Clients'
import AddClient from './components/AddClient'
import NavBar from './components/NavBar'
import AddLesson from './components/AddLesson'
import CalculateIncome from './components/CalculateIncome'
class App extends Component {
state = {
clients : [
// {id : null , name : '', price : null}
],
lessons : [
// {id: null, name: '', time: null, date :null}
],
}
deleteClient = (id) => {
let clients = this.state.clients.filter(client => {
return client.id !== id
})
this.setState({
clients: clients
})
}
addClient = (newClient) => {
newClient.id = Math.random();
let clients = [...this.state.clients, newClient];
clients.sort((a, b) => a.name.localeCompare(b.name))
this.setState({
clients: clients,
})
}
addLesson = (newLesson) => {
newLesson.id = Math.random();
newLesson.date = Date();
let lessons = [...this.state.lessons, newLesson];
this.setState({
lessons: lessons,
})
}
render() {
return (
<div className="App">
<NavBar/>
<Clients clients={this.state.clients} deleteClient={this.deleteClient} lessons={this.state.lessons}/>
<AddClient addClient={this.addClient}/>
<AddLesson addLesson={this.addLesson} lessons={this.state.lessons} clients={this.state.clients} income={this.state.income} />
<CalculateIncome lessons={this.state.lessons} clients={this.state.clients}/>
</div>
);
}
}
export default App;
Вот мой addLesson.js
import React, {Component} from 'react'
class AddLesson extends Component {
state = {
id: null, name: null, time: null, date : null
}
handleChange = (e) => {
this.setState({
[e.target.id] : e.target.value,
})
console.log([e.target.id]);
}
handleSubmit = (e) => {
e.preventDefault();
this.props.addLesson(this.state);
e.target.reset();
}
render() {
return (
<div className="text-center mt-5">
<h2>Add a lesson</h2>
<form onSubmit={this.handleSubmit}>
<label htmlFor="name">Client Name: </label>
<select onChange={(e) => this.handleChange(e)} id="name">
<option value=""></option>
{this.props.clients.map(client =>
<option key={client.id} value={client.name.value}>
{client.name}
</option>
)}
</select>
<br/>
<label htmlFor="time">Lesson Duration (in hours): </label>
<input type="text" id="time" onChange={this.handleChange}/><br/>
<button className="btn btn-primary">Add Lesson</button>
</form>
</div>
)
}
}
export default AddLesson
Вот мои клиенты.js
import React from 'react'
const Clients = ({clients, deleteClient, lessons}) => {
const clientList = clients.map(client =>{
return (
<div className="container" key={client.id}>
<ul className="clientInfo">
<li className="py-3">
<span className="name">Client Name: {client.name}</span>
<span className="price pl-3 pr-5">Client Price: {client.price}</span>
<button className="btn btn-danger" onClick={() => {deleteClient(client.id)}}>X</button>
</li>
</ul>
</div>
)
})
const lessonList = lessons.map(lesson =>{
return (
<div className="container" key={lesson.id}>
<ul className="lessonInfo">
<li className="py-1">
<span className="name">Lesson Name: {lesson.name}</span>
<span className="price pl-3 pr-3">Lesson Time(in hours): {lesson.time}</span>
<span className="date">Lesson Added: {lesson.date}</span>
</li>
</ul>
</div>
)
})
return(
<div className="container text-center">
<h2>Here are your current clients...</h2>
{clientList}
<h2>Here is the list of lessons so far</h2>
{lessonList}
</div>
)
}
export default Clients
и, наконец, вот файл CalculateIncome.js, над которым я работаю, должен ли он быть основан на классе?
import React, {Component} from 'react'
class CalculateIncome extends Component {
state = {
totalIncome:0
}
calculation = () => {
this.props.lessons.filter(lesson => {
this.props.clients.filter(client => {
if (client.name === lesson.name){
let price = client.price
let time = lesson.time
return(price, time)
}
return (
this.setState({
totalIncome : (price * time)
})
)
})
})
}
render() {
return ( this.props.lessons.length ?
(this.state.totalIncome)
:
(<div className="text-center my-5">You are broke</div>)
)
}
}
export default CalculateIncome