reactjs - 如果填写了 form.item 2，则禁用 form.item 1

Question

我想隐藏 form.item 1是否form.item 2填写，反之亦然。我想为以下代码执行此操作，但我找不到解决方案。

<Form.Item label="Url">
  {getFieldDecorator('url')(<Input/>)}
</Form.Item>
<Form.Item label="Standaard Urls" >
  {getFieldDecorator('url_id', {})(this.getSelectUrls())}
</Form.Item>

基本上我也想知道如何隐藏 1form.item其余的我可以自己做

标签： reactjsantd

Answer 1

你需要使用onFieldsChange，Form.create这让你Form无法控制，这是最干净的方式。

用状态包装你Form，传递它并onFieldsChange像这样使用：

const FormContainer = () => {
  const [isVisible, setIsVisible] = useState(true);

  const onFieldsChange = (_, changedFiels) => {
    const { password } = changedFiels;
    if (password) {
      console.log(`Now changing ${password.name}`);
      setIsVisible(false);
    }
  };

  const ValidatedFields = Form.create({ onFieldsChange })(MyForm);

  return <ValidatedFields isVisible={isVisible} />;
};

警告：您需要弄清楚如何“删除”表单字段，这取决于您是否需要它的状态，为此您可以使用displayCSS 属性：

// Will unmount the item and lose it state
{ isVisible && <Form.Item>...}

// Will keep the state and hide the item
<Form.Item style={{ display: isVisible ? 'auto' : 'none' }}>...

---

完整代码：

在此示例中，您可以在密码字段中写入，它将隐藏其他表单项：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Input, Form, Icon } from 'antd';
import 'antd/dist/antd.css';
import './index.css';

const FormContainer = () => {
  const [isVisible, setIsVisible] = useState(true);

  const onFieldsChange = (_, changedFiels) => {
    const { password } = changedFiels;
    if (password) {
      console.log(`Now changing ${password.name}`);
      setIsVisible(false);
    }
  };

  const ValidatedFields = Form.create({ onFieldsChange })(MyForm);

  return <ValidatedFields isVisible={isVisible} />;
};

const MyForm = ({ form, isVisible }) => {
  const { getFieldDecorator, validateFields } = form;

  const handleSubmit = e => {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  return (
    <Form onSubmit={handleSubmit} className="login-form">
      {isVisible && (
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }]
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Item 1"
            />
          )}
        </Form.Item>
      )}
      <Form.Item style={{ display: isVisible ? 'auto' : 'none' }}>
        {getFieldDecorator('username2', {
          rules: [{ required: true, message: 'Please input your username!' }]
        })(
          <Input
            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
            placeholder="Item 2"
          />
        )}
      </Form.Item>
      <Form.Item>
        {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="Type here to hide other forms"
          />
        )}
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<FormContainer />, document.getElementById('root'));