根据所选选项填充 Antd 输入值

Question

我想根据之前 selected 的名称填充一个输入值。例如，如果我 select “FRANCILIENNE CONSEIL” 我希望关联的正确 IBAN 是输入的值。

我尝试了几件事都没有成功。

这是我的代码的堆栈闪电战：https://stackblitz.com/edit/react-rc3me7

Answer 1

您可以创建一些 states 来处理初学者的 select option 和 input。然后通过 handleChangeBeneficiary 功能更新它们。

在 Option 中，如果你使用 unique variable 就像 beneficiaryId 而不是 name 将是理想的，除非你的 name 在这里还有 unique.
你可以在这里看到工作代码：https://stackblitz.com/edit/react-rc3me7-gr3fmu

import React, { useState } from 'react'

const Demo = () => {
  const [beneficiary, setbeneficiary] = useState()
  const [iban, setiban] = useState()

  const handleChangeBeneficiary = (value) => {
    console.log(`selected ${value}`);
    setbeneficiary(value)

    // get selected iban
    const selected = beneficiaries?.find(item => item?.beneficiaryId == value)
    setiban(selected?.iban)
  };

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const beneficiaries = [
    {
      iban: 'FR76167LQSDKJLKSQJ86538089',
      name: 'FRANCILIENNE CONSEIL',
      bic: 'TRZOFR21XXX',
      beneficiaryId: '60c38ddf-63f9-4589-888b-27b7e1a50e53',
    },
    {
      iban: 'FR291001DSKLFJSLKJ8633Z17',
      name: 'MR NAMLA EMAD',
      bic: 'PSSTFRPPCNE',
      beneficiaryId: '60a11891-81ba-4ab2-9b92-ce4f461c2d50',
    },
  ];
  return (
    <Form
      {...layout}
      name="test"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item label="Nom du bénéficiare" name="benef">
        <Select
          // defaultValue=""
          value={beneficiary}
          style={{ width: 300, marginBottom: 20 }}
          onChange={handleChangeBeneficiary}
        >
          {beneficiaries.map((nom) => (
            <Option value={nom.beneficiaryId}> {nom.name} </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label="IBAN" name="iban">
        <Input 
          // autoComplete="off" 
          style={{ marginBottom: 20 }}
          placeholder={iban} 
        disabled/>
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

Answer 2

您也可以更新 IBAN 的值。请尝试以下代码。

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, InputNumber, Button, Select } from 'antd';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
/* eslint-disable no-template-curly-in-string */

const { Option } = Select;

/* eslint-enable no-template-curly-in-string */

const Demo = () => {

  const [iban,setValue] =useState('')
  const handleChangeBeneficiary = (value) => {
    console.log(`selected ${value}`);
    const ben= beneficiaries.filter((b)=>b.name===value)
    setValue(value)
   
  };


  

  const onFinish = (values) => {
    console.log('Success:', values);
  
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const beneficiaries = [
    {
      iban: 'FR76167LQSDKJLKSQJ86538089',
      name: 'FRANCILIENNE CONSEIL',
      bic: 'TRZOFR21XXX',
      beneficiaryId: '60c38ddf-63f9-4589-888b-27b7e1a50e53',
    },
    {
      iban: 'FR291001DSKLFJSLKJ8633Z17',
      name: 'MR NAMLA EMAD',
      bic: 'PSSTFRPPCNE',
      beneficiaryId: '60a11891-81ba-4ab2-9b92-ce4f461c2d50',
    },
  ];
  return (
    <Form
      {...layout}
      name="test"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item label="Nom du bénéficiare" name="benef">
        <Select
          defaultValue=""
          style={{ width: 300, marginBottom: 20 }}
          onChange={handleChangeBeneficiary}
        >
          {beneficiaries.map((nom) => (
            <Option value={nom.name}> {nom.name} </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label="IBAN">
        <Input autoComplete="off" style={{ marginBottom: 20 }} value={iban}/>
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));

根据所选选项填充 Antd 输入值

Populate Antd Input value depending on selected option

reactjs

antd