reactjs - 点击时更新输入状态，来自表格列表

Question

提前致谢。

如何将反应输入值更新为单击按钮时的状态。我在表格行中列出了输入和按钮列表。需要更新特定项目的状态数组。

代码如下

    <TableCard>
      <Table dataSource={itemListArray}>
        <Column
          title="ItemName"
          align="left"
          render={item => (
                    <div>
                      <Input value={item.Name} />
                      <Icon onClick={???} />
                     </div>
          )}
        />
      </Table>
    </TableCard>

Answer 1

您应该为获取的渲染创建一个新组件item。在这个组件中，您可以使用它自己的状态和item

class Example extends React.Component {
      state: {
        itemListArray: [{ name: 'Name', noise: 'NA' }]
      }

      handleChange: Function = ({ index, name, value }) => {
        let newValueArray = [ ...itemListArray ]

        newValueArray[index] = {
          ...newValueArray[index],
          [name]: value,
        }

        this.setState({ itemListArray: newValueArray })
      }

      render() {
        const { itemListArray } = this.state

        return (
          <>
             <TableCard>
              <Table dataSource={itemListArray}>
                <Column
                  title="ItemName"
                  align="left"
                  render={(item, index) => (
                    <ExampleItem
                      item={item}
                      index={index}
                      onChange={this.handleChange}
                    />
                  )}
                />
              </Table>
            </TableCar
          </>
        );
      }
    }

    import React, { useState } from 'react';

    function ExampleItem({ item, index, onChange }) {
      handleClick: Function = () => {
        onChange({
          index,
          name: 'name',
          value: item.name + 'a',
        })
      }

      return (
        <>
          <Input value={item.name} />
          <Icon onClick={this.handleClick}>
            Add an A to name string
          </Icon>
        </>
      );
    }