I'm working on a SharePoint Webpart and my DefaultButton
has brocken.
I load items to an office-ui-fabric Dropdown from a SharePoint List. It's working fine, I get the value of the selected options, but... I want to push the selected value in an other SharePoint List.
I use onClick to implement my addListItem
Method and getting the following error:
No overload matches this call. Overload 1 of 2, '(props: IButtonProps | Readonly): DefaultButton', gave the following error. Type '(event: FormEvent, option: IDropdownOption) => void' is not assignable to type 'MouseEventHandler<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement | BaseButton | Button | HTMLSpanElement>'. Overload 2 of 2, '(props: IButtonProps, context: any): DefaultButton', gave the following error. Type '(event: FormEvent, option: IDropdownOption) => void' is not assignable to type 'MouseEventHandler<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement | BaseButton | Button | HTMLSpanElement>'.
And below my Code:
import pnp,{} from 'sp-pnp-js';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { FormEvent } from 'react';
export default class Form extends React.Component<
IFormProps,
IListFormState,
{}
> {
constructor(props: IFormProps){
super(props);
this.addListItem = this.addListItem.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = { options:[], selectedValue:"", selectedOption: "" };
}
public render(): React.ReactElement<IFormProps> {
return (
<div className={styles.choice}><br></br><br></br>
<Dropdown options={this.state.options}
onChange={ this.handleChange}
/>
</div>
<label id="infoLabel" className={styles.infoText}> {this.state.selectedValue} </label>
<DefaultButton className={styles.btn1} onClick= {()=> this.addListItem }> Rückruf eintragen </DefaultButton>
);
}
private getListItems = async () => {
const listItems = await pnp.sp.web.lists.getByTitle('DropdownList').items.select('Beschreibung','Beschreibung0').get();
return listItems;
};
private createOptions = (listItems: any) => {
const options = listItems.map((item: { Beschreibung: any; Beschreibung0: any; }) => {
return { key: item.Beschreibung0, text: item.Beschreibung };
});
return options;
};
componentDidMount() {
this.getListItems().then(listItems => {
const options = this.createOptions(listItems);
this.setState({options});
});
}
public handleChange = (event: FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
this.setState({
selectedOption: option.text,
selectedValue: option.key.toString()
});
this.setState({ selectedOption: option.text });
console.log("Selected Option: " + option.text); // "Selected Option for example: Ferrari"
}
public addListItem (event: FormEvent<HTMLDivElement>, option: IDropdownOption) {
let dropdown = option.text;
// item push in the SharePoint List
pnp.sp.web.lists.getByTitle("TestList")
.items.add({
'Rubrik': dropdown
})
.then(()=> alert("Die Datei wurde erfolgreich gespeichert!"));
}
}
}
I tried this way too:
<DefaultButton className={styles.btn1} onClick= {()=> this.addListItem }> Rückruf eintragen </DefaultButton>
This way looks like a solution, I have no more error(s), but my button action doesn't work. I have no issue, no error message in VSCode, no error message on Chrome, EDGE or Firefox Console, no alert, nothing.
Anyone some idea? Thank you!