在 AntD InputNumber 组件中接收 defaultValue 作为 prop答案

【问题标题】：Receive defaultValue as prop in AntD InputNumber component在 AntD InputNumber 组件中接收 defaultValue 作为 prop
【发布时间】：2020-05-23 09:54:53
【问题描述】：

我正在使用 AntD 组件构建一个表，我的一个列由 InputNumber 组件组成。我希望 InputNumber 组件有一个默认值，该值包含在传递给 table 组件的 prop 中。但是我不确定如何从父级访问道具，或者更具体地说，将它们传递给 InputNumber 组件，因为列的渲染道具存在于表格组件之外。下面是代码示例

import React, { Component } from 'react';
import { Table, Divider, InputNumber } from 'antd';

const pageSize = 30; // Page size to show pagination
const reqColumns = [
  {
    title: 'Filled',
    dataIndex: 'slotFilled',
    editable: false,
  },
  {
    title: 'Required',
    dataIndex: 'slotMinimum',
    render: () => (
        <InputNumber min={0}/>
    ),
  },
];

export default class RequirementsTable extends Component {

  render() {
    return (
      <div>
        <Divider type="horizontal" orientation="left">
          Requirements
        </Divider>
        <Table
          rowKey="senateShortname"
          bordered
          dataSource={this.props.data}
          columns={reqColumns}
          pagination={1 > pageSize && { pageSize }}
          size="small"
        />
      </div>
    );
  }
}

我尝试设置defaultValue = {this.props.data}，但当然它指向 InputNumber 的道具。

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

AntD 表已经在尝试将值传递给单元格。解决方法很简单。

  {
    title: 'Required',
    dataIndex: 'slotMinimum',
    render: (value) => (
        <InputNumber min={0} defaultValue={value}/>
    ),
  },

【讨论】：