扩展人员选择器以包括标签、输入框和按钮等表单项答案

【问题标题】：Extending People Picker to include form items like labels, input boxes and buttons扩展人员选择器以包括标签、输入框和按钮等表单项
【发布时间】：2019-09-27 15:15:06
【问题描述】：

我终于可以使用人员选择器来更新 SharePoint 列表了。

如何扩展它以使用标签、按钮和输入框等表单元素？

我看到了这段代码，但它在this.props.data.Name 下划线并带有一条消息：

属性data在“只读”类型上不存在。

它还强调onChange 说它不存在于只读类型。

    private _onChange = (e: React.KeyboardEvent) => {
       const name = this.props.data.Name;
       const value = (e.target as HTMLInputElement).value;
       this.props.onChange(name, value);
    }

这是我的类的开始，包括构造函数。我担心如果我向界面添加更多属性，我可能会停止人员选择器的工作。

     export default class PnPPeoplePicker extends React.Component<IPnPPeoplePickerProps, IPnPPeoplePickerState> {  
       constructor(props: IPnPPeoplePickerProps, state: IPnPPeoplePickerState) 
       {
         super(props);

         this.state = {
           addUsers: []
         };
       }

【问题讨论】：

你的IPnPPeoplePickerState 接口中有data 属性吗？
没有。数据属性应该在这个接口中还是在新接口中？应该是什么类型的？
在您的代码中，您使用的是this.props.data.Name。 this.props 里面有 data 属性吗？如果没有，则需要将其添加到IPnPPeoplePickerProps 界面中才能使用它。您是否从其他地方复制了此代码？
我使用了c-sharpcorner.com/article/pnp-people-picker-control-for-spfx上的zip文件
我在界面中添加了数据并修改了构造函数如下： constructor(props: IPnPPeoplePickerProps, state: IPnPPeoplePickerState) { super(props); this.state = { addUsers: [], data: }; }

标签： reactjs sharepoint-online spfx

【解决方案1】：

您可以从这里参考解决方案：

SPFx React Form with People Picker/Taxonomy Picker using PnP Js & React Controls

【讨论】：