reactjs - antd onChange 每次击键都会触发三次

Question

我在 antd 中有以下形式，代码几乎逐字取自 the official website 。代码沙箱也是here :

以下代码的问题在于，每次在字段中击键时，onChange 方法都会触发三 (3) 次。如果打开浏览器控制台，您也可以在codesandbox链接中验证这一点。我想了解为什么会这样以及可以采取什么措施。

import React from 'react';
import { Form, Input } from 'antd';

import {FieldData} from 'rc-field-form/es/interface.d.ts';
interface CustomizedFormProps {
  onChange: (fields: FieldData[]) => void;
  fields: FieldData[];
}


const CustomizedForm: React.FC<CustomizedFormProps> = ({ onChange, fields }) => {
  return (
    <Form
      name="global_state"
      layout="inline"
      fields={fields}
      onFieldsChange={(changedFields, allFields) => {
        onChange(allFields);
      }}
    >
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Username is required!' }]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export class AntdFormTest extends React.Component<{}, {fields: FieldData[]}> {
  
  constructor(props: {}) {
    super(props);
    this.state = {fields: [{name: ['username'], value: 'Ant Design'}]};
  }

  render() {
    return (
      <>
        <CustomizedForm
          fields={this.state.fields}
          onChange={newFields => {
            console.log('onChange fired');
            this.setState({fields: newFields});
          }}
        />
        <pre className="language-bash">{JSON.stringify(this.state, null, 2)}</pre>
      </>
    );
  }
};

Answer 1

您应该使用 onValuesChange 方法。当字段更新(重新渲染)时，会触发 onFieldsChange。在这里查看更多:https://ant.design/components/form/#API

Here它解释了何时应该使用 OnFieldsChange 方法