介绍

从零开始搭建react项目，结合antd库进行开发，在还未了解其原理的情况下只照着官网的案例进行开发，难免会遇到很多问题，下面对遇到的问题做个总结，希望后期能深入对react和antd原理的理解和熟练，不再依赖各种百度寻找答案。

Form–校验

import React, { Component } from 'react'
import { Form, Radio } from 'antd'

class UserAddForm extends Component {
	handleSubmit = e => {
      e.preventDefault()
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
        console.log('创建用户表单内容', values)
        // 这里进行提交表单操作
      }
    })
  }
  render () {
    const { getFieldDecorator } = this.props.form
    return (
      <div className="user-add">
        <Form onSubmit={this.handleSubmit}>
          <Form.Item label="名称">
            {
              getFieldDecorator('name', {
                rules: [
                  { required: true, message: '输入...' }
                ]
              })(<Input></Input>)
            }
          </Form.Item>
          <Form.Item {...pageTailFormItemLayout}>
            <Button type="primary" htmlType="submit">提交</Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

const UserListAdd = Form.create({name: 'user-add-form'})(UserAddForm)

export default UserListAdd

Form–Radio

在表单中使用Radio组件时，经常会需要Radio有个默认选中的值，如果我们按照普通表单元素那样写

<Form.Item label="密码策略">
  {
    getFieldDecorator('stragety', {
      rules: [{ required: true, message: '选择...' }]
    })(<Radio.Group value={this.state.tragety}>
        <Radio value={0}>生成重置密码链接，通过邮件发送给用户</Radio>
        <Radio value={1}>设置密码</Radio>
      </Radio.Group>)
  }
</Form.Item>

会报错在这里插入图片描述
原因是getFieldDecorator定义的stragety属性值会覆盖Radio绑定的value属性值，所以需要在组件渲染完成后手动进行默认值的赋值

componentDidMount () {
  const { setFieldsValue } = this.props.form
  setFieldsValue({'stragety': 0})
}

<Form.Item label="密码策略">
  {
    getFieldDecorator('stragety', {
      rules: [{ required: true, message: '选择...' }]
    })(<Radio.Group>
        <Radio value={0}>生成重置密码链接，通过邮件发送给用户</Radio>
        <Radio value={1}>设置密码</Radio>
      </Radio.Group>)
  }
</Form.Item>

选择componentDidMount钩子是因为，需要在组件已经render后，表达那元素已经存在的情况下给出默认值。

antd–Tree组件默认选中和展开

<Tree defaultExpandedKeys={['all']} defaultSelectedKeys={['all']}>
  { this.state.treeData.map(item => genTreeNode(item)) }
</Tree>

其中生成树节点的函数

const genTreeNode = (node) => {
 if (node.children && node.children.length) {
    return (
      <Tree.TreeNode title={node.title} key={node.uuid}>
        { node.children.map(child => genTreeNode(child)) }
      </Tree.TreeNode>
    )
  } else {
    return (
      <Tree.TreeNode title={node.title} key={node.uuid}></Tree.TreeNode>
    )
  }
}

异步返回的数据格式
在这里插入图片描述
并将{title:全部, uuid:'all', children: data}进行数据改造，所以我们将defaultExpandedKeys和defaultSelectedKeys都设置为all，希望最终效果是根节点可以自动展开并选中。
其中this.state.treeData数据获取在constructor中获取（官方已不建议使用componentWillMount钩子了，需要放这里的函数都建议放在constructor中写），出现的效果是什么样子呢？
结果并没有展开第一个节点。
原因：因为Tree第一次渲染的时候数据this.state.treeData是空的，等到异步数据获取到赋值到this.state.treeData上后进行第二次渲染组件，而defaultExpandedKeys、defaultSelectedKeys以及defaultExpandAll这些默认属性只在首次渲染的时候才能生效，所以我们要做的就是在treeData为空的时候不渲染Tree组件，有数据的时候再渲染Tree组件。

{
 this.state.treeData && this.state.treeData.length ? (
   <Tree defaultExpandedKeys={['all']} defaultSelectedKeys={['all']}>
     { this.state.treeData.map(item => genTreeNode(item)) }
   </Tree>
 ) : (
   <div className="page-empty">暂无数据</div>
 )
}

有数据时候渲染Tree组件，无数据显示暂无数据。

未完待续。。。

来源：CSDN

作者：永不秃头的程序媛

链接：https://blog.csdn.net/weixin_43443341/article/details/103973711

标签

react

form