Как обрабатывать изменения состояния внутри массива в ReactionJS? (используя antd design для элемента Select)

Question

Я просто новичок в использовании reactJS, и я хочу спросить, как мне обрабатывать изменения, которые происходят в состоянии на основе индекса / элемента внутри массива.

Я знаю, что раньше об этом спрашивали, и лучший способ - использовать синтаксис спреда. но как вы используете это в моем случае. (Я использую antd дизайн для элемента Select) Спасибо.

Вот мой код: https://codesandbox.io/s/3yoxzm4ql5

import React from 'react';
import {Table} from 'reactstrap';
import {Row,Col,Input,Select} from 'antd';
import axios from 'axios';

const Option = Select.Option;

class OrderBooksForm extends React.Component {
    constructor() {
        super();
        this.state = {
            rows: [{
                brandName: '',
                titleName: '',
                bookClass: '',
                firstStock: '',
                editAmount: '',
                difference: '',
            }, {
                brandName: '',
                titleName: '',
                bookClass: '',
                firstStock: '',
                editAmount: '',
                difference: '',
            }, {
                brandName: '',
                titleName: '',
                bookClass: '',
                firstStock: '',
                editAmount: '',
                difference: '',
            }, {
                brandName: '',
                titleName: '',
                bookClass: '',
                firstStock: '',
                editAmount: '',
                difference: '',
            }, {
                brandName: '',
                titleName: '',
                bookClass: '',
                firstStock: '',
                editAmount: '',
                difference: '',
            }],
            books: [],
        }
    }

    componentDidMount() {
        axios.get(`api/books`)
            .then(response => {
                console.log(response.data);
                this.setState({
                    books: response.data
                })
            })
            .catch(err => {
                console.log(err)
            })
    }

    addRow = () => {
        this.setState(prevState => {
            return {
                rows: [...prevState.rows, {
                    brandName: '',
                    titleName: '',
                    bookClass: '',
                    firstStock: '',
                    editAmount: '',
                    difference: '',
                }]
            }
        })
    }

    //here where I'm starting to get confused
    handleChange = (index, value) => {
        const rows = [...this.state.rows];
        let awe = JSON.parse(value.key);
        this.setState({
            rows: [{
                brandName: awe.book_name,
                titleName: awe.book_title,
                bookClass: awe.book_class,
                firstStock: awe.book_first_amount,
                editAmount: ? ? ? ? ? ? ? , //what should I get as a value of my input text
                difference: Math.abs(this.state.firstStock - this.state.editAmount),
            }]
        })
    };

    render() {
        return (
                <div>
                  <Table>
                      <thead>
                          <tr>
                              <th>NO</th>
                              <th>BOOK NAME/th>
                              <th>BOOK TITLE</th>
                              <th>BOOK CLASS</th>
                              <th>FIRST STOCK/th>
                              <th>EDIT AMOUNT/th>
                              <th>DIFFERENCE</th>
                              <th>ACTIONS</th>
                          </tr>
                      </thead>
                      <tbody>
                          {this.state.rows.map((row, index) => (
                          <tr key={index}>
                              <td>
                                  {index + 1}
                              </td>
                              <td>
                                  <Select showSearch labelInValue style={{width: 200}} placeholder="find book" optionFilterProp="children" onChange={this.handleChange} filterOption={(input, option)=> option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                      >
                                      {this.state.books.map((data, index) => <Option key={JSON.stringify(data)}>{data.book_name}</Option>)}
                                  </Select>
                              </td>
                              <td>
                                  {row.titleName}
                              </td>
                              <td>
                                  {row.bookClass}
                              </td>
                              <td>
                                  {row.firstStock}
                              </td>
                              <td>
                                  <input type="text" name="name" className="form-control" value={row.editAmount} onChange={this.handleChange} />
                              </td>
                              <td>
                                  {row.difference}
                              </td>
                          </tr>
                          ))}
                      </tbody>
                  </Table>
                  <button type="button" onClick={this.addRow} className="add-row">
                      +
                  </button>
              </div>
        )
    }
}

Я хочу использовать динамический setState. Пожалуйста, если кто-нибудь может помочь

Answer 1

Я изменил код Codepen. Я в основном разделил компоненты для разделения проблем. Пожалуйста, посмотрите и скажите, действительно ли это то, что вы хотели.

Новая ссылка Codepen https://codesandbox.io/s/74kvk02421