antd中的from赋值和初始化-React

1,362 阅读1分钟

引入和初始化

写文章是为了记录问题,我发现网上别的文章解析这个问题太过啰嗦,而且很多答案是不对的。

import { Form,Input } from 'antd';
import React,{ PureComponent } from 'react';

class Setting extends  PureComponent  {
    formRef = React.createRef();
    state:{
        setDate:{
            maxDischargeW:''
        }
    };
    // 储能器最大输出功率    
    onSetMaxDischargeW = (value) => {
     let initVal = { ...this.state.setData };
      initVal.maxDischargeW = value;        
        this.setState({
            setData: initVal,       
         });
        this.formRef.current.setFieldsValue(initVal);
     };
      render(){
           return (
                 <Form 
                    ref={this.formRef}                        
                    onFinish={this.onFinish}                        
                    initialValues={setData}                    
                    >
                    <Form.Item name='maxDischargeW'>                               
                         <InputNumber                                   
                             onChange={this.onSetMaxDischargeW}                                
                        />                            
                    </Form.Item>
                   </Form>       
                )
    }
   
}

这样写的原因

  1. antd的Form数据只会取state一次,后续并不会自动取并更新
  2. Form的初始化数据一般是ajax取,有延时。