SHAREPOINT FRAMEWORK - REACT JS alert on Page Load

Question

I am new to SharePoint framework and React JS.

I have build a basic Web Part with CRUD operation using React JS.

I wanted to show drop-down(html select) value on Page Load in an alert. I am able to get an alert on page load but not able to figure out how to get html select value in that alert.

Please advice.

Here is my code for getting alert on page load.

componentDidMount() {   
  alert("Hi");
}



public render(): React.ReactElement<IReactCrudProps> {   
    return ( 
        <select id="myDDl">

        </select>
    );
}

Which drop-down value? Do you have any drop-down in your web part? If Yes, please add HTML code. — Ganesh Sanap - MVP
– Ganesh Sanap - MVP, Commented Jul 19, 2019 at 9:15
edited my question to add the render method with dropdown(select html) code — user85476
– user85476, Commented Jul 19, 2019 at 9:31
Have you mapped the select options from state or stored selected value in state? See this, it might help you. — Ganesh Sanap - MVP
– Ganesh Sanap - MVP, Commented Jul 19, 2019 at 9:39
you cannot display custom html in alert...alert is javascript method...to display dropdown in popup, use some either jquery/bootstrap or react popup... — Siddharth Vaghasia
– Siddharth Vaghasia, Commented Jul 19, 2019 at 9:41
He/she want to show the drop-down(html select) value. not drop-down. If he/she can get the drop-down value in componentDidMount function maybe using React state or some javascript then he/she can show it in an alert. — Ganesh Sanap - MVP
– Ganesh Sanap - MVP, Commented Jul 19, 2019 at 9:46

Ganesh Sanap - MVP · Accepted Answer · 2021-02-22 10:50:32Z

This is how I was able to do it:

import * as React from 'react';
import styles from './Reactspfx.module.scss';
import { IReactspfxProps } from './IReactspfxProps';
import { escape } from '@microsoft/sp-lodash-subset';
 export interface IReactGetItemsState{ 
selectValue:string
}
export default class Reactspfx extends React.Component<IReactspfxProps, 
  IReactGetItemsState> {
public constructor(props: IReactspfxProps) {
super(props);
this.state = {
  selectValue:"Radish"
};

}

 handleChange = (event) => {
this.setState({selectValue:event.target.value});
alert(event.target.value);
};

 public render(): React.ReactElement<IReactspfxProps> {
alert(this.state.selectValue);
return (
  
  <select value={this.state.selectValue}  onChange={this.handleChange}>
    <option value="Orange">Orange</option>
      <option value="Radish">Radish</option>
      <option value="Cherry">Cherry</option>
    </select>
);
}

Stack Exchange Network

SHAREPOINT FRAMEWORK - REACT JS alert on Page Load

1 Answer 1

Your Answer

Hot Network Questions

SHAREPOINT FRAMEWORK - REACT JS alert on Page Load

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions