React下拉选择框：优雅处理多字段显示与隐藏ID存储

// 父组件 Form.js
import React, { useState } from 'react';
import AutocompleteForm from './AutocompleteForm'; // 假设 AutocompleteForm 是一个封装组件

const initialState = [
  {"ID" : 1, "name" : "raw1", "description" : "description 1"},
  {"ID" : 2, "name" : "raw2", "description" : "description 2"},
  {"ID" : 3, "name" : "raw3", "description" : "description 3"},
];

function Form() {
   const [allRaws, setAllRaws] = useState(initialState); // 实际应用中可能通过API获取
   const [rawID, setRawsID] = useState('');

   // 这种方式将ID拼接进显示字符串，需要后续解析
   const mappedRaws = allRaws.map((raw) => (
       `${raw.name}: ${raw.description}*${raw.ID}`
   ));

    const handleSelectRaws = (event, value) => {
        if (value != null){
            // 通过字符串解析提取ID
            const id = value.split("*").pop();
            setRawsID(id);
        }
    };

   return (
       <AutocompleteForm 
                array={mappedRaws} // 传递处理后的字符串数组
                label="Pick set of raws" 
                onChange={handleSelectRaws} />
   );
}

export default Form;

// 子组件 AutocompleteForm.js (使用 Material-UI Autocomplete)
import React from 'react';
import { Autocomplete, TextField } from '@mui/material';

export default function AutocompleteForm(props) {
   const { label, array, onChange} = props;

   return (
     <Autocomplete
       disablePortal
       options={array} // 接收处理后的字符串数组
       sx={{ width: 300 }}
       renderInput={(params) => <TextField {...params} label={label}/>}
       onChange={onChange}
     />
   );
}

// 父组件 Form.js
import React, { useState } from 'react';
import AutocompleteForm from './AutocompleteForm'; // 假设 AutocompleteForm 是一个封装组件

const initialState = [
  {"id" : 1, "name" : "raw1", "description" : "description 1"},
  {"id" : 2, "name" : "raw2", "description" : "description 2"},
  {"id" : 3, "name" : "raw3", "description" : "description 3"}
];

function Form() {
  const [allRaws, setAllRaws] = useState(initialState); // 实际应用中可能通过API获取
  const [rawID, setRawsID] = useState(null); // 初始值设为null更合适

  const handleSelectRaws = (event, value) => {
    if (value != null) {
      // value 现在是完整的选中对象，可以直接访问其属性
      setRawsID(value.id); 
    } else {
      setRawsID(null); // 处理清空选择的情况
    }
  };

  return (
    <AutocompleteForm 
      array={allRaws} // 直接传递原始对象数组
      label="Pick set of raws" 
      onChange={handleSelectRaws} 
    />
  );
}

export default Form;

// 子组件 AutocompleteForm.js (使用 Material-UI Autocomplete)
import React from 'react';
import { Autocomplete, TextField } from '@mui/material';

export default function AutocompleteForm(props) {
  const {label, array, onChange} = props;

  return (
    <Autocomplete
      disablePortal
      options={array} // 直接接收原始对象数组
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label={label}/>}
      onChange={onChange}
      // 使用 getOptionLabel 定义选项的显示文本
      getOptionLabel={(option) => `${option.name}: ${option.description}`} 
    />
  );
}