如何处理reactJS数组中的更改状态？ （为Select元素使用antd设计）

Question

我刚接触reactJS，我想问问我如何处理基于数组内索引/元素的状态下发生的更改。

我知道这已经被问过很多了，最好的方法是使用扩展语法。但是在我的情况下您如何使用它。 （我对Select元素使用antd设计） 谢谢。

这是我的代码：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