Помогите я новичок в React. Задача: дан массив с работниками. У каждого работника есть имя, фамилия, количество отработанных дней и зарплатная ставка за день. Выведите этих работников на экран в виде таблицы. Сделайте так, чтобы в последней колонке автоматически рассчитывалась зарплата работника (количество отработанных дней умножить на ставку). Сделайте так, чтобы количество дней и ставка выводились в виде инпутов. Если поредактировать эти инпуты - зарплата также должна поменяться. Под таблицей также выведите суммарную зарплату всех работников. Зарплата автоматически высчитывается, а общую сумму зарплаты не получается посчитать. Для этого надо уведомлять компонент ItemList об изменении полей в Item. Для этого я сделала привязку через props, но вызывается ошибка TypeError: Cannot read property 'items' of undefined
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import update from 'immutability-helper';
class Item extends React.Component {
constructor(props) {
super(props);
this.state = {
index: this.props.index , name: this.props.name, surname: this.props.surname,
numberOfWorkingDays: this.props.numberOfWorkingDays, dailySalary: this.props.dailySalary
};
this.handleChangeNumWrk = this.handleChangeNumWrk.bind(this);
this.handleChangeDs = this.handleChangeDs.bind(this);
}
handleChangeNumWrk(e) {
this.props.onHdWk(e.target.value, this.state.index);
}
handleChangeDs(e) {
this.props.onHdDs(e.target.value, this.state.index);
}
render() {
let nmb = this.props.numberOfWorkingDays;
let ds = this.props.dailySalary;
return <tr>
<td>{this.state.index}</td>
<td>{this.state.name}</td>
<td>{this.state.surname}</td>
<td><input type='text' name='nwd' value={nmb}
onChange={this.handleChangeNumWrk}/></td>
<td><input type='text' name='ds' value={ds}
onChange={this.handleChangeDs}/></td>
<td>{this.state.dailySalary*this.state.numberOfWorkingDays}</td>
</tr>;
}
}
class ItemsList extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{ id: 1, name: 'Ivan', surname: 'Ivanov', numberOfWorkingDays: 3, dailySalary: 500},
{ id: 2, name: 'Petr', surname: 'Petrov', numberOfWorkingDays: 4, dailySalary: 600},
{ id: 3, name: 'Vasiliy',surname: 'Vasilev', numberOfWorkingDays: 5, dailySalary: 700},
{ id: 4, name: 'Anna', surname: 'Olegovna', numberOfWorkingDays: 6, dailySalary: 800},
{ id: 5, name: 'Rita', surname: 'Ivanova', numberOfWorkingDays: 7, dailySalary: 900},
{ id: 6, name: 'Yulia', surname: 'Petrova', numberOfWorkingDays: 8, dailySalary: 1000},
{ id: 7, name: 'Albert', surname: 'Kozlov', numberOfWorkingDays: 9, dailySalary: 500},
{ id: 8, name: 'Zhanna', surname: 'Palmirova',numberOfWorkingDays: 10, dailySalary: 600},
{ id: 9, name: 'Ivan', surname: 'Smirnov', numberOfWorkingDays: 11, dailySalary: 700},
{ id: 10, name: 'Sergey', surname: 'Sidorov', numberOfWorkingDays: 12, dailySalary: 800}
]
,
commonSum:0
};
this.sums = this.sums.bind(this);
this.updateItem = this.updateItem.bind(this);
}
sums(){
let sum = 0;
this.state.items.map((item, index) => {
sum += item.numberOfWorkingDays*item.dailySalary;
});
return sum;
}
onChangeNmb(numb, index) {
var listIt = this.state.items;
listIt: update(listIt, {index: {numberOfWorkingDays: {$set: numb}}});
this.setState({items: listIt});
}
onChangeDs(ds, index) {
var listIt = this.state.items;
listIt: update(this.state.items, {index: {dailySalary: {$set: ds}}});
this.setState({items: listIt});
}
render() {
var divStyle = {
paddingLeft: '450px'
};
const list = this.state.items.map((item, index) => {
return <Item key={item.id}
index={index+1} name={item.name} surname={item.surname}
numberOfWorkingDays={item.numberOfWorkingDays}
dailySalary = {item.dailySalary}
onHdWk = {this.onChangeNmb}
onHdDs = {this.onChangeDs}/>;
});
return <div>
<div>{this.props.title}</div>
<table>
<tbody >
<tr>
<th>№</th>
<th>Имя</th>
<th>Фамилия</th>
<th>Кол-во отработанных дней</th>
<th>Ставка за день</th>
<th>Итого</th>
</tr>
{list === null?null:list}
</tbody>
</table>
<div style={divStyle}>Общая сумма: {this.sums()}</div>
</div>;
}
}
ReactDOM.render(<ItemsList title="Отчет о заработной плате работников."></ItemsList>, document.getElementById('app'));
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть страница сайта сделанная на vueНо с vue страница рендерится на клиенте и изначально страница прходит пустой
У меня есть массив объектовlet arr = [], в нем находятся такие объекты:
Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме
Сначала думал, что это можно сделать через таблицы, потом понял, что не вариантМожно было бы сделать каждый элемент отдельно, но тогда из-за...