react之antd自定义表单控件(如form + table如何使用)

Form(表单)Funtion组件代码: 

const FormComp = () => {
    //点提交按钮就会触发这个事件并打印Form表单的值
    const onFinish = values => {
        console.log('Received values from form: ', values);
    };

    return (

      
//这个是Table组件
) }

带有多选框功能的Table的Funtion组件代码:

/**
* @param value形参接受的是Form表单initialValues初始化的值
* @param onChange是函数, 绑定给了Form表单
*/
const TableComp = ({ value, onChange }) => {

  //表格触发change事件, 这时调用Form表单传过来的onChange事件,这样Form表单点提交就拿到了tableValue最新的值了
  tableChange: (e) => {
    onChange({
        tableValue: e 
     })
  },

  return (
    
); };

以上就完成了Form表单的自定义组件;

 

如果你用的是class组件,那么调用this.props就能拿到Form表单初始化的value和绑定的onChange事件了,代码如下

class TableComp extends React.Component {

  tableChange= (e) => {
    this.props.onChange({
      tableValue: e
    })
  }

  render() {
    return (
      
); } }

文章中多选框表格是这样的: 

 react之antd自定义表单控件(如form + table如何使用)_第1张图片

官方文档地址:

Form表单 

Table表格

 

你可能感兴趣的:(React,web前端,ant,design,pattern,forms)