简体   繁体   中英

Receive defaultValue as prop in AntD InputNumber component

I'm using AntD components to build a table and one of my columns consists of the InputNumber component. I would like the InputNumber component to have a default value that is contained in a prop that is passed to the table component. However I'm unsure how to access the props from the parent, or more specifically pass them to the InputNumber component as the render prop for the columns exists outside of the table component. Here is an example of the code

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>
    );
  }
}

I've attempted to set the defaultValue = {this.props.data} but of course that points to the props of the InputNumber.

The AntD table already was attempting to pass the value to the cell. The solution was quite simple.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM