使用react来做webpart -form提交 select下拉框的写法

898 阅读1分钟

这是我参与2022首次更文挑战的第8天,活动详情查看:2022首次更文挑战

Deadline 永远是最好的老师,我发现我在面临最后截止日期的时候,变得比平常聪明多了.

目前的工作要求

制作一个SharePoint表单,点击save能够把值存到SharePointlist中.

预估遇到的问题

  • react 不会 SharePoint使用的是react框架
  • SharePoint开发的流程 未知
  • 代码与SharePoint List 是怎样有联系的.

解决方案

  • react 不会那还能有什么好办法吗,看了文档,看了好几天.
  • SharePoint 开发流程 通过看视频 还有领导的介绍,领导帮忙写了个demo
  • 通过调用SharePoint Framework 的API来存储数据

开始动手

创建项目,复制demo,创建属于自己的react组件,然后成功应用到页面上. image.png

实际遇到的问题

表格的列的名字,实际与显示不同,会有差异,我用了比较的笨的方法,写了一个get方法去Debug,看看计算机读到的数据是什么样子的,

image.png

表的映射果然不一样,像这样空格和()这样的都是使用ASCII码来写的.以前也有这样的解决方案可以参考. 怎样写下拉框,解决方案

//现在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",
            
        };
        //下拉框的取值方法
         public getValue=(event)=>{
        //获取被选中的值
        console.log(event.target.value);
        this.setState({
          //默认值改变
          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)=>this.getValue(e)}> */}
                    {
            // 遍历option
                this.state.TypeOfActivityChoices.map((ele,index)=>{
              return(
                <option key={index}>{ele}</option>
              )
            })
          }
                        </select>
                        }}

嘿嘿,这是今天学到的,快过年了,节日快乐,万事如意