如何自定义PrimeReact手风琴?

Question

我正在做一个项目，在这个项目中，每当一个输入元素被点击(聚焦)时，手风琴就应该打开。

我使用了下面的代码

const [accordion, setaccordion] = useState<number>();
const handleAccordion = (id : number) => {
setaccordion(id);
}
<InputText 
placeholder="Summarize your problem"
className="w-100 border border-color question-title-input m-2rem mx-0 mt-0 
text-q-grey px-4 py-3"
value={questionTitle}
onChange={(e) => setQuestionTitle(e.target.value)}
onFocus={(e) => handleAccordion(0)}

/>

我将此作为道具传递给另一个组件，现在我想更新手风琴的状态，谁能分享他们的专业知识如何做到这一点，我有些如何达到直到下面但不确定如何继续

<Accordion
onTabChange={e => setState({ activeIndex: [e.index] })}
activeIndex={id}
className="q-accordion"
expandIcon="pi pi-chevron-down"
collapseIcon="pi pi-chevron-up"
>

注意:手风琴应该在点击输入元素时打开，也可以手动打开。

Answer 1

这里有一个CodeSandbox可以解决你的问题。