This is the eighth day of my participation in the First Challenge 2022.

Deadline is always the best teacher, and I find myself getting smarter than usual when it comes to deadlines.

Current job requirements

To create a SharePoint form, click Save to save the values to a SharePoint List.

Anticipate problems encountered

  • React does not SharePoint uses the React framework
  • The process for SharePoint development is unknown
  • How the code relates to the SharePoint List.

The solution

  • React No, what else can you do? I read the document for a few days.
  • SharePoint development process by watching the video and the introduction of the leader, the leader helped write a demo
  • The data is stored by calling the SharePoint Framework API

start

Create a project, copy the demo, create your own React component, and successfully apply it to the page.

Actual problems encountered

The column name of the table will be different from that of the display. I used a rather stupid method to write a GET method to Debug and see what the data read by the computer looks like.

The mapping of the table is different. Spaces like this and () are written in ASCII. There have been solutions like this before. How to write pull box, solution

// Now declare in state
export class FormSubmit extends React.Component<FormSubmitProps.FormSubmitState>{
    constructor(props: FormSubmitProps, state: FormSubmitState) {
        super(props);
        this.state = {
        TypeOfActivityChoices: ["Service Campaign"."Recall"."Policy"."Mandatory Campaign"].//TypeOfActivityChoices:this.state.items.selectItem,
            TypeOfActivityChoice:"Service Campaign"};// The value method of the drop-down box
         public getValue=(event) = >{
        // Get the selected value
        console.log(event.target.value);
        this.setState({
          // The default value changes
          TypeOfActivityChoice:event.target.value
        })
    
      }
      
      
       public render(): React.ReactElement<FormSubmitProps> {
        return (
<select name='TypeOfActivityChoice' value={this.state.TypeOfActivityChoice} onChange={(e)= >this.getValue(e)}>
                    {/* <select name='TypeOfActivityChoice' value={this.state.TypeOfActivityChoice} onChange={(e)= >Enclosing getValue (e)} > * /} {/ / traverse option. This state. The TypeOfActivityChoices. The map ((ele, index) = > {return (<option key={index}>{ele}</option>)})}</select>
                        }}
Copy the code

Hey hey, this is learned today, fast New Year’s day, happy holidays, all the best