Form

FormItem自己接管数据，不建议在外部手动接管

  1. //bad
  2. <FormItem>
  3.   <Input onChange={(e)=> {
  4.       this.setState({
  5.         val: e.target.value
  6.     })
  7.   }}/>
  8. </FormItem>

使用表单自带的校验，不要使用手动校验

  1. //bad
  2. <Form onFinish={(values)=> {
  3.     if(values.XXX) {}
  4. }}>
  5. ...
  6. </Form>

复杂表单自定义表单组件，不需要写ref等一堆骚操作

  1. //bad
  2. <FormItem ref={ref}>
  3.     <div>
  4.    ...
  5.         <ueditor .../>
  6.   </div>
  7. </FormItem>
  9. //good
  10. <FormItem>
  11.     <CustomField />
  12. </FormItem>

Form表单自己可以设置布局，不需要外部写col标签

  1. //bad
  2. <Row>
  3.     <Col>
  4.       <Input />
  5.   <Col>
  6. </Row>

Form表单校验尽量写在form上的onfinish上，不写在按钮上

  1. //bad
  2. <Button onclick={()=> {
  3.     const values = ...
  4. }}>
  5. ...
  6. </Button>

Table

column每一列需要写width

防止因为宽度不够挤压导致样式错乱

  1. //good
  2. const columns = [
  3.   {
  4.     title: 'Name',
  5.     dataIndex: 'name',
  6.     width: 150,
  7.   },
  8.   {
  9.     title: 'Age',
  10.     dataIndex: 'age',
  11.     width: 150,
  12.   },
  13.   {
  14.     title: 'Address',
  15.     dataIndex: 'address',
  16.   },
  17. ];

Table必须设置rowkey

  1. <Table rowkey='id' />

InputNumber

需要设置范围和精度，不知道要问产品

  1. //good
  2. <InputNumber min={1} max={10} precision={2} />