AntDesign--解决Tree组件defaultExpandAll不生效问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AntDesign--解决Tree组件defaultExpandAll不生效问题相关的知识,希望对你有一定的参考价值。

参考技术A 解决方案:在数据加载完成后渲染 Tree 来实现全部展开
1.通过state管理loading状态

2.在获取到TreeData数据后改变loading的状态

3.通过loading状态控制Tree组件的显示

5-3 使用antDesign的form组件

技术图片

 

import  Form, Icon, Input, Button, Checkbox  from ‘antd‘;

class NormalLoginForm extends React.Component 
  handleSubmit = e => 
    e.preventDefault();
    this.props.form.validateFields((err, values) => 
      if (!err) 
        console.log(‘Received values of form: ‘, values);
      
    );
  ;

  render() 
    const  getFieldDecorator  = this.props.form;
    return (
      <Form onSubmit=this.handleSubmit className="login-form">
        <Form.Item>
          getFieldDecorator(‘username‘, 
            rules: [ required: true, message: ‘Please input your username!‘ ],
          )(
            <Input
              prefix=<Icon type="user" style= color: ‘rgba(0,0,0,.25)‘  />
              placeholder="Username"
            />,
          )
        </Form.Item>
        <Form.Item>
          getFieldDecorator(‘password‘, 
            rules: [ required: true, message: ‘Please input your Password!‘ ],
          )(
            <Input
              prefix=<Icon type="lock" style= color: ‘rgba(0,0,0,.25)‘  />
              type="password"
              placeholder="Password"
            />,
          )
        </Form.Item>
        <Form.Item>
          getFieldDecorator(‘remember‘, 
            valuePropName: ‘checked‘,
            initialValue: true,
          )(<Checkbox>Remember me</Checkbox>)
          <a className="login-form-forgot" href="">
            Forgot password
          </a>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
          Or <a href="">register now!</a>
        </Form.Item>
      </Form>
    );
  


const WrappedNormalLoginForm = Form.create( name: ‘normal_login‘ )(NormalLoginForm);

ReactDOM.render(<WrappedNormalLoginForm />, mountNode);

 

以上是关于AntDesign--解决Tree组件defaultExpandAll不生效问题的主要内容,如果未能解决你的问题,请参考以下文章

React+AntDesign使用Tree树控件完整展现其中的层级关系,并具有展开收起选择等交互功能

SpringBoot+Vue+AntDesign前后端分离解决方案

AntDesign组件库的使用

AntDesign组件库的使用

Storybook 和 AntDesign 组件 - 如何使用 CRA 和 Typescript 进行设置?

antdesign日期组件不能手动输入