javascript - 如何在 reactJS 中处理数组内的更改状态？ (对 Select 元素使用 antd design)

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