React ant设计仅重置一个输入字段

核心114

我正在将我的项目用于React ant设计4。我在表格上有些矛盾。我想知道如何仅重置一个(注)字段,任何人都知道解决方案

谢谢

斯塔兹布利兹在这里

这里的代码

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Select } from 'antd';
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const Demo = () => {
  const [form] = Form.useForm();

  const onGenderChange = (value) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({
          note: 'Hi, man!',
        });
        return;

      case 'female':
        form.setFieldsValue({
          note: 'Hi, lady!',
        });
        return;

      case 'other':
        form.setFieldsValue({
          note: 'Hi there!',
        });
        return;
    }
  };

  const onFinish = (values) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({
      note: 'Hello world!',
      gender: 'male',
    });
  };

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item
        name="note"
        label="Note"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="gender"
        label="Gender"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select
          placeholder="Select a option and change input text above"
          onChange={onGenderChange}
          allowClear
        >
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
      >
        {({ getFieldValue }) => {
          return getFieldValue('gender') === 'other' ? (
            <Form.Item
              name="customizeGender"
              label="Customize Gender"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input />
            </Form.Item>
          ) : null;
        }}
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
        <Button type="link" htmlType="button" onClick={onFill}>
          Fill form
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));
丹尼·欧莱特

您可以在form.resetFields通话中添加namePath数组

const onReset = () => {
   form.resetFields(["note"]);
};

刚刚使用您的代码对其进行了测试,并且可以正常工作:https : //stackblitz.com/edit/react-nazmet-jh2cc1?file=index.js

更多信息:https : //ant.design/components/form/#FormInstance

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

(React) 密码输入字段一次显示一个字母

来自分类Dev

如何将表单输入字段传递给 React 中的另一个组件?

来自分类Dev

如何从React中的useRef重置输入字段?

来自分类Dev

React Ant设计文件仅上传xls文件验证

来自分类Dev

React Webpack config:是否可以仅替换阵列中的一个插件的配置,而无需重置一系列插件?

来自分类Dev

React Ant设计4输入搜索显示表数据

来自分类Dev

React Redux仅显示一个元素

来自分类Dev

在React中仅渲染最后一个列表项

来自分类Dev

使用React Router仅显示一个组件

来自分类Dev

当时仅选择一个计划React State Hook

来自分类Dev

如何仅使用React选择一个单选按钮

来自分类Dev

React-Redux:始终声明一个输入

来自分类Dev

编辑 react-select 的最后一个输入

来自分类Dev

无法重置表单输入字段(React JS 控制的组件)

来自分类Dev

在 React 中提交表单后无法重置输入字段

来自分类Dev

当我导航回React-Native的前一个屏幕时,状态是否重置?

来自分类Dev

使用javascript仅更改一个输入字段

来自分类Dev

在React中单击另一个输入框时如何更改输入值

来自分类Dev

React Hooks - 动态呈现文本输入并将输入存储为一个数组

来自分类Dev

React:如何从一个组件获取输入值以在另一个组件中进行ajax调用?

来自分类Dev

尝试在react中添加多个图像,但仅显示一个图像

来自分类Dev

react.js打字稿传播(...)仅添加最后一个元素

来自分类Dev

仅具有一个依赖项的useEffect / React Hook useEffect缺少依赖项:'props'

来自分类Dev

向仅一个DOM节点的React组件中添加Segment Telemtry

来自分类Dev

React:如何仅更新一个元素的状态,而不是批量更新

来自分类Dev

React Native + react-native-router-flux:如何将hideNavBar应用于仅一个<Scene />?

来自分类Dev

如何在提交时仅重置表单中的一个字段

来自分类Dev

通过在React中选择一个禁用选项作为默认值来重置下拉列表

来自分类Dev

从React.js的另一个下拉菜单中选择一个选项时如何重置下拉菜单值

Related 相关文章

  1. 1

    (React) 密码输入字段一次显示一个字母

  2. 2

    如何将表单输入字段传递给 React 中的另一个组件?

  3. 3

    如何从React中的useRef重置输入字段?

  4. 4

    React Ant设计文件仅上传xls文件验证

  5. 5

    React Webpack config:是否可以仅替换阵列中的一个插件的配置,而无需重置一系列插件?

  6. 6

    React Ant设计4输入搜索显示表数据

  7. 7

    React Redux仅显示一个元素

  8. 8

    在React中仅渲染最后一个列表项

  9. 9

    使用React Router仅显示一个组件

  10. 10

    当时仅选择一个计划React State Hook

  11. 11

    如何仅使用React选择一个单选按钮

  12. 12

    React-Redux:始终声明一个输入

  13. 13

    编辑 react-select 的最后一个输入

  14. 14

    无法重置表单输入字段(React JS 控制的组件)

  15. 15

    在 React 中提交表单后无法重置输入字段

  16. 16

    当我导航回React-Native的前一个屏幕时,状态是否重置?

  17. 17

    使用javascript仅更改一个输入字段

  18. 18

    在React中单击另一个输入框时如何更改输入值

  19. 19

    React Hooks - 动态呈现文本输入并将输入存储为一个数组

  20. 20

    React:如何从一个组件获取输入值以在另一个组件中进行ajax调用?

  21. 21

    尝试在react中添加多个图像,但仅显示一个图像

  22. 22

    react.js打字稿传播(...)仅添加最后一个元素

  23. 23

    仅具有一个依赖项的useEffect / React Hook useEffect缺少依赖项:'props'

  24. 24

    向仅一个DOM节点的React组件中添加Segment Telemtry

  25. 25

    React:如何仅更新一个元素的状态,而不是批量更新

  26. 26

    React Native + react-native-router-flux:如何将hideNavBar应用于仅一个<Scene />?

  27. 27

    如何在提交时仅重置表单中的一个字段

  28. 28

    通过在React中选择一个禁用选项作为默认值来重置下拉列表

  29. 29

    从React.js的另一个下拉菜单中选择一个选项时如何重置下拉菜单值

热门标签

归档