如何在ANT设计的某些字段中设置选定的值，以使其与ReactJ中的验证规则保持兼容？

Question

我正在使用use antd设计模板，带有antd版本“ antd”：“^4.16.6”。

我有一个蚂蚁设计表格，在提交表格以编辑现有记录之前，我正在填充数据。

CurrencyConversionById是我要编辑的对象/记录。它的结构就是这样： -

currencyConversionById = {
    base_currency   : "USD",
    base_amount     : 1,
    to_currency     : "CAD",
    to_amount       : 2.45
}

货币清单是这样的货币列表： -

currencyList = [
    {
        currency        : "American Dollar",
        currency_code   : "USD"
    },
    {
        currency        : "Canadian Dollar",
        currency_code   : "CAD"
    }
]

选择字段将其货币列表作为其选项和与CORGEN> CORMEN> CORMING> CORLUND CORMINGERYBYID.TO_Currency.to_currency 的选项。 ，将显示为选定。

这是形式： -

<Form {...layout} form={form} name={formTitle(window.location.pathname)} onFinish={onFinish}>
    <Form.Item name="base_currency" label="Base Currency" rules={CURRENCY_CODE_VALIDATION}>
    <Input value={baseCurrency} onChange={({ target: { value, } }) => setBaseCurrency(value)} readOnly={true}/>
    </Form.Item>
    <Form.Item name="base_amount" label="Base Amount">
    <Input value={baseCurrencyAmount} onChange={({ target: { value, } }) => setBaseCurrencyAmount(value)} readOnly={true}/>
    </Form.Item>
    {
    currencyListLoading
    ? <Loader message={"Loading Currency List"} description={"Listing all currency data"} type={"success"}/>
    : <Form.Item name="toCurrency" label="To Currency" rules={[{ required: true, message: 'Please, select a secondary currency' }]} initialvalue={toCurrency}>
        <Select placeholder="Select a option and change input text above" allowClear onChange={value => setToCurrency(value)} onLoad={value => setToCurrency(value)} value={toCurrency} defaultValue={toCurrency}>
            <Option key={0} value="0">None</Option>
            {currencyList && currencyList.length > 0 && currencyList.map((currency, indexCrn) => {
            return (
                <Option key={currency?.currency_code} value={currency?.currency_code}>{currency?.currency_code}</Option>
                )
            })}
        </Select>
        </Form.Item>
    }
    <Form.Item name="to_amount" label="To Amount" rules={AMOUNT_VALIDATION}>
    <Input value={toCurrencyAmount} onChange={value => setToCurrencyAmount(value)} onLoadedData={value => setToCurrencyAmount(value)}/>
    </Form.Item>
    <Form.Item {...tailLayout}>
    <Button type="primary" htmlType="submit">{formCardTitle(window.location.pathname)}</Button> &nbsp;
    <Button htmlType="button" onClick={onReset}>
        Reset
    </Button>
    </Form.Item>
</Form>

在形式中填充数据时，我做到了： -

  useEffect(() => {
  if (currencyConversionById !== null)
  {
    form.setFieldsValue({
      base_currency : currencyConversionById?.base_currency,
      base_amount   : currencyConversionById?.base_amount,
      to_currency   : currencyConversionById?.to_currency.toString(),
      to_amount     : currencyConversionById?.to_amount.toString()
    });
    setToCurrency(currencyConversionById?.to_currency);
  }  
}, [currencyConversionById])

使用form.setfieldsvalue我可以为所有文本输入设置值，但是对于Select此： -

const [toCurrency, setToCurrency]  = useState("");

useEffect(() => {
    if (currencyConversionById !== null)
    {
        ------------------------
        ------------------------
        setToCurrency(currencyConversionById?.to_currency);
    }  
}, [currencyConversionById])

使用settocurrency（），我设置了tocurrency值为“ cad”，然后以表格，传递为initialValue和defaultValue这样： -

<Form.Item name="toCurrency" label="To Currency" rules={[{ required: true, message: 'Please, select a secondary currency' }]} initialvalue={toCurrency}>
<Select placeholder="Select a option and change input text above" allowClear onChange={value => setToCurrency(value)} onLoad={value => setToCurrency(value)} value={toCurrency} defaultValue={toCurrency}>
    <Option key={0} value="0">None</Option>
    {currencyList && currencyList.length > 0 && currencyList.map((currency, indexCrn) => {
    return (
        <Option key={currency?.currency_code} value={currency?.currency_code}>{currency?.currency_code}</Option>
        )
    })}
</Select>
</Form.Item>

通过这样做，“ CAD”显示为选定选项。但是，当我尝试提交功能时，触发了to_currency的验证规则。

为什么这样发生？由于已经显示为选定的选项，因此不应触发所需的验证。但是不知道为什么这种验证一直被触发。

我该如何解决？

Answer 1

您可以使用initialValues表格属性来设置初始值

form.Item带有名称属性的组件将变成
受控模式，这使默认值不再起作用。请尝试
表单的初始价值设置默认值。