Ant Design 能在getFieldDecorator里绑定onBlur方法吗?

getFieldDecorator里绑定onBlur方法无效,但是绑定onChange方法有效
代码如下:

const { Form, Icon, Input, Button, Checkbox, } = antd;

const FormItem = Form.Item;

class NormalLoginForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  
  getInfo = (e) => {
    const {checked} = e.target;
    console.log('同步获取', checked);
    setTimeout(() => {
      const values = this.props.form.getFieldsValue();
      console.log('异步', e, values);
    }, 0)
    
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
            /*onChange: (e) =>{
              if(e.target.value == ''){
                 this.props.form.setFieldsValue({
                      remember:false
                  });
              }
              console.log("kjjjjkkkkkk");
            }*/
            onBlur: (e) =>{
              if(e.target.value == ''){
                 this.props.form.setFieldsValue({
                      remember:false
                  });
              }
              console.log("kjjjjkkkkkk");
            }
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )}
        </FormItem>
        <FormItem>
          {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" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: false,
            
          })(
            <Checkbox onChange={this.getInfo}>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>
        </FormItem>
      </Form>
    );
  }
}

const WrappedNormalLoginForm = Form.create()(NormalLoginForm);

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

将onChange修改为onBlur后控制台就无法输出“kjjjjkkkkkk”了,是我哪里写的有问题吗?还是说onBlur绑定只能绑定到表单元素上,不能像上面那样匿名绑定?但是我看官网getFieldDecorator里是可以有其它事件的,只是说onChange是默认事件。

阅读 4.7k
2 个回答

clipboard.png

clipboard.png

getFieldDecorator('userName', {
    trigger: 'onBlur'
}

试试这样

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题