在包装组件中手动设置选择组件的占位符和值,而不是将这些值委托给选择组件本身。以下是示例代码:
import React, { useState, useEffect } from 'react'; import Select from 'react-select';
const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', label: 'Strawberry' }, { value: 'vanilla', label: 'Vanilla' } ];
const SelectWrapper = ({ placeholder, value, onChange }) => { const [selectedOption, setSelectedOption] = useState(null);
useEffect(() => { if (value) { const option = options.find(option => option.value === value); setSelectedOption(option); } else { setSelectedOption(null); } }, [value]);
const handleSelectChange = option => { setSelectedOption(option); onChange(option.value); };
return ( ); };
// Example usage: const App = () => { const [selectedValue, setSelectedValue] = useState(null);
const handleSelectChange = value => { setSelectedValue(value); };
return (
上一篇:包装组件的输出更干净
下一篇:包作为子进程运行但作为孙进程失败