前端笔记

分组器项目

1、Checkbox.Group的坑

<Checkbox.Group value={checkedCodes} onChange={this.handleCheckGroupChange} style={{padding:'10px 0'}}>
                        {
                            allRule.map((item)=><Checkbox  
                                    key={item.codeValue}
                                    onChange ={(e)=>this.handleCheckboxChange(e,item)}
                                    value={item.codeValue}
                                >{item.codeName}</Checkbox>)
                        }
                    </Checkbox.Group>

Checkbox.Group标签上的value和onChange是控制选中与取消的，checkbox上的value是不变的值用来标识这个选项的值是什么，checkbok的onChange不控制选中或取消只是当这个选项在操作时要做什么，Checkbox.Group上的value和onChange是受控的体现，checkbox上的value和onChange与受控无关。

2、noStyle的理解

noStyle+表单控件设置宽度 ==Form.Item设置 inline-block+width == noStyle+ 行内表单控件（如checkbox不会像input那样占据一行的宽度）

加上noStyle. 校验提示不换行，不加的话说明这部分是一个独立的表单项分，跟前面或者后面的内容都没有关系；

<Form.Item>
        <Form.Item name="remember" noStyle>
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <a className="login-form-forgot" href="">
          Forgot password
        </a>
      </Form.Item>

像上述着这种情况如果不加noStyle的话Forgot password就会在下一行。FormItem可以设置宽度

3、form表单 dependencies和shouldUpdate

shouldUpdate不能和name一起用，通常采用noStyle加Form.Item嵌套的形式使用；

<Form.Item
              label="方案2"
              noStyle
              shouldUpdate={(prevValues, currentValues) => prevValues.prgCode1 !== currentValues.prgCode1}
            >
              {({ getFieldValue }) => {
                return <Form.Item
                label="方案2"
                name="prgCode2"
              >
                <Select allowClear optionFilterProp="children" showSearch>
                  {
                    plan1List.filter(item => item.prgCode != getFieldValue("prgCode1")).map(item => <Select.Option value={item.prgCode}>{item.prgName}</Select.Option>)
                  }
                </Select>
                </Form.Item>
              }}
            </Form.Item>

dependencies和检验连用

<Form.Item
        name="confirm"
        label="Confirm Password"
        dependencies={['password']}
        hasFeedback
        rules={[
          {
            required: true,
            message: 'Please confirm your password!',
          },
          ({ getFieldValue }) => ({
            validator(rule, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }

              return Promise.reject('The two passwords that you entered do not match!');
            },
          }),
        ]}
      >
        <Input.Password />
      </Form.Item>

shouldUpdate和renderProps连用

4、form.isFieldsTouchede

form.isFieldsTouched(true)在页面第一次渲染完后是true,要强制再渲染一次结果才是false