React 蚂蚁设计冲突 table input total balance

Question

我试图为我的 React ant design 4 table 做一些计算部分，我不知道在自动计算总数然后提交后输入值时如何获取。任何人都知道如何正确地做到这一点。

谢谢

这是我的代码部分

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
  },
  {
    title: 'Book',
    dataIndex: 'book',
    key: 'book',
  },
  {
    title: 'Pen',
    dataIndex: 'pen',
    key: 'pen',
  },
  {
    title: 'Tools',
    key: 'tools',
    dataIndex: 'tools',

  },
  {
    title: 'Total',
    key: 'total',
       dataIndex: 'total',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    book: <Form.Item name="book1"  rules={[{required: true, message: " is required"}]}><Input style={{width: 150}}/></Form.Item>,
    pen: <Form.Item name="oen1"  rules={[{required: true, message: "is required"}]}><Input style={{width: 150}}/></Form.Item>,
   tools: <Form.Item name="tools1"  rules={[{required: true, message: " is required"}]}><Input style={{width: 150}}/></Form.Item>,
   total:'00000'
  },

];
 const onFinish = values => {
    console.log(values);
  };
ReactDOM.render( 
  <div> 
    <Form name="control-hooks" onFinish={onFinish}>
      <Table columns={columns} dataSource={data} />
      <div>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </div>
    </Form>
  </div>, document.getElementById('container'));

Answer 1

我假设行可以不止一行。您可以通过以下方式实现：

你需要一个状态。在反应中，为了更改 UI 上的某些内容（例如总计列），您需要一个状态。将您的数据数组置于状态。

const [数据, setData] = useState([ ... ])
你需要知道你输入的是哪一行，你可以在输入上添加一些区别，等于行键。这里我建议在输入名称上加上一些数字：

...

...

...
使用 <Form> 的 onValuesChange 道具，它会在您每次输入输入和 return 表单值时触发。有了这个，您可以提取输入名称上的数字并将其用作参考以了解哪一行将要更改并执行 setState。

如果你只需要一个数字输入，我也建议使用 InputNumber 而不是 Input。

这里是working link。如果我没有击中你想要的，你可以start/play在那里

你也可以看看antd table editable rows。这可能比这个更容易使用

React 蚂蚁设计冲突 table input total balance

Conflict on the React ant design table input total balance

antd

react-typescript