antd笔记

   

 

    form 表单动态跟新值

   

 

     setFieldsValue  getFieldsValue

 

 

    

this.refs.basic_form.setFieldsValue({thumbnails:path})

this.refs.basic_form.getFieldsValue(“thumbnails”)

 

 

4.0调用

class中调用

import { FormInstance } from 'antd/lib/form';

class Demo extends React.Component {
  formRef = React.createRef<FormInstance>();

   .....
  onReset = () => { 
    this.formRef.current!.resetFields(); 
    this.formRef.current!.setFieldsValue({ note: 'Hi there!' });
};


｝

render() {
    return (
      <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish}>

......

}

 

 函数组件

 

const [form] = Form.useForm();

const RegistrationForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

return (
    <Form
      {...formItemLayout}
      form={form}
      name="register"
      onFinish={onFinish}
      initialValues={{
        residence: ['zhejiang', 'hangzhou', 'xihu'],
        prefix: '86',
      }}
      scrollToFirstError
    >

 

 

InputNumber 数字输入框只能输入整数 

 

/* 限制数字输入框只能输入整数 */

limitNumbe = (value: any="") => {
    return  value.replace(/^(0+)|[^\d]/g, '')
}

 

<InputNumber style={{width:"100%"}} parser={(value)=>this.limitNumbe(value)}/>

 

 

 

 Form.List自定义添加一项（不使用默认的add方法）

const handleAddItem = ()=>{
        const list = form.getFieldValue('list');
        const nextList = list.concat(discountObj);
        form.setFieldsValue({
            list: nextList,
        });
    };

文章地址：From.List用法详解

 

窗口距离顶部距离

document.documentElement?.scrollTop