Помогите я новичок в 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'));
sums( ){ ... }
- подозреваю, проблема в этой функции и в отсутствии у него аргументов. Прямо в ней же, вначале можете записатьalert( this );
или лучше,console.log( this );
чтобы при вызове посмотреть, чему оно равно и правильно ли определяется.onChange
иonChangeNmb
. Поэтому в них не виденthis