SharePoint开发 使用react 去完成表单提交并存储到SharePointlist中

这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

今天也是阳光灿烂的一天,没有什么不开心的.

创建项目

前一篇文章说过了,记得选择react框架就行

创建组件

在component下创建文件夹 比如我就创建了叫 FormSubmit

然后遵从 react组件开发模式,创建咱们的组件 先建三个文件,分别是

• FormSubmit.tsx
• FormSubmitprops.ts
• FormSubmitState.ts 在FormSubmitprops.ts 文件中粘贴以下代码

//为了拿去到 context 上下文
import { WebPartContext } from "@microsoft/sp-webpart-base";

export interface FormSubmitProps{
    context: WebPartContext;
}

在FormSubmitState.ts文件中声明需要的值例如

export interface FormSubmitState{
    Name:string;
    Department:string;
    Status:string;
    DecisionForum:string;
}

修改render方法()

public render(): React.ReactElement<FormSubmitProps> {
        return (
            <form onSubmit={this.EditDemoACE}>
                <ul>
                    <li>Name: <input type="text" name="Name" value={this.state.Name} onChange={this.OnChangeName} /></li>
                    <li>Department: <input type="text" name="Department" value={this.state.Department} onChange={this.OnChangeDepartment} /></li>
                    <li>Status: <input type="text" name="Status" value={this.state.Status} onChange={this.OnChangeStatus} /></li>
                    <li>DecisionForum: <input type="text" name="DecisionForum" value={this.state.DecisionForum} onChange={this.OnChangeDecisionForum} /></li>
                    <li><button type="submit">Save</button></li>
                </ul>
            </form>
        );
    }   

这是效果图,在SharePoint中.

然后去绑定事件,让他们能够被管理.

     this.EditDemoACE = this.EditDemoACE.bind(this);
     this.OnChangeName = this.OnChangeName.bind(this);
     this.OnChangeDepartment = this.OnChangeDepartment.bind(this);
     this.OnChangeStatus = this.OnChangeStatus.bind(this);
     this.OnChangeDecisionForum = this.OnChangeDecisionForum.bind(this);

写事件函数

  public OnChangeName(state){
     this.setState({Name: state.target.value});
 }
 public OnChangeDepartment(state){
     this.setState({Department: state.target.value});
 }
 public OnChangeStatus(state){
     this.setState({Status: state.target.value});
 }
 public OnChangeDecisionForum(state){
     this.setState({DecisionForum: state.target.value});
 }   

其中 提交form的EditDemoACE的方法得好好说一下,调用了SharePoint框架的API,一定要拿到Context才能继续后面的操作,不然会报错,调用Api存入表格上面的数据,我自己造的数,名字对不上就对不上吧,就为了做个例子.

public EditDemoACE(event){
    const request: any = {};
    request.body = JSON.stringify({
    
      goods: this.state.Name,
      price: this.state.Department,
      counts: this.state.Status,
      IDNUM: this.state.DecisionForum,
     // '@odata.type': spEntityType
    });
   this.props.context.spHttpClient.post(
      this.props.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('Items')/items`,
      SPHttpClient.configurations.v1,
      request)
      .then(
          (response: SPHttpClientResponse) =>{
        alert(response.status)})
 
    }

注意下面这个方法.这是当打开页面初始化页面的方法,比如你如果有动态生成的选项值,那么就可以在页面加载时调用这个方法来进行,动态初始化.

//这个方法是初始化页面设置的方法,
 public componentDidMount(): void {
       // this.EditDemoACE(null);
    }

写在最后,今天SharePoint 可气死我了,时灵时不灵,我真的有点玄学的意思了.铁子们快过年了祝大家天天开心. 这是完整代码