如何在 PivotItem 标头上添加 buttonclick - React

【问题标题】：How to add buttonclick on PivotItem Header - React如何在 PivotItem 标头上添加 buttonclick - React
【发布时间】：2021-12-26 13:45:07
【问题描述】：

我想在 Pivot 列表的标题文本上添加按钮单击。我添加了headerButtonProps，但它不起作用。

<PivotItem headerText={"abc"} className="def"  headerButtonProps={{onClick: ()=>{  alert("abc123") } }} >
                        <HorizontalStack  className="list">
                            
                        </HorizontalStack>                        
</PivotItem>

【问题讨论】：

标签： reactjs react-native react-redux pivot pivotitem

【解决方案1】：

在列表jsx文件中制作你想要的函数，然后将它作为prop传递给item组件。

// PivotList.jsx


const handleClick = () => {
    console.log("hi!")
}

return (
    <PivotItem handleClick={handleClick} />
)

// PivotItem.jsx

export const PivotItem = ({handleClick}) => {
    return (
       <Component onClick={handleClick} />
    )
}

希望你能找到解决办法！

【讨论】：

Type '{ children: Element[]; headerText: string; className: string; handleClick: () => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<PivotItem> & Readonly<IPivotItemProps> & Readonly<...>'. 收到此错误。我想只在标题上添加点击，而不是在整个数据透视项上。