0

Помогите я новичок в 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'));
3
  • sums( ){ ... } - подозреваю, проблема в этой функции и в отсутствии у него аргументов. Прямо в ней же, вначале можете записать alert( this ); или лучше, console.log( this ); чтобы при вызове посмотреть, чему оно равно и правильно ли определяется. 29 мая 2019 в 11:58
  • @BeatusApril пожалуйста оформите код чтобы было понятно где какой файл. 29 мая 2019 в 12:05
  • вы не забиндили в конструкторе onChange и onChangeNmb. Поэтому в них не виден this 30 мая 2019 в 13:56

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Посмотрите другие вопросы с метками или задайте свой вопрос.