React小白工作上的使用记录这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战工作上要

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

工作上要使用react + Typescript 去开发webpart,我真的是从零开始学啊,现在把之前不会的,记录一下.

Tips:vs code 在终端下使用 code ./ 打开当前项目,不行的话,需要command+shift +P ->shell command 选择安装code命令就好了

下拉框遍历生成

在最上面的state中声明 TypeOfActivityChoices这个数组,然后遍历生成选项,getValue,为了获取选中的值.

public getValue = (event) => {
        //获取被选中的值
        console.log(event.target.value);
        this.setState({
            //默认值改变
            TypeOfActivityChoice: event.target.value
        })

    }

<span>Type of activity</span>
                                <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>

声明对象的写法

有好几种,我使用了这一种:

var comfirm_GaoFlynt = { name: "Flynt Gao",  Tele: "+86 123456", Email:  Location: "Tianjin",  }

时间日期遇到的坑

想生成一个编号,去确立两个表之间的关系,想了一下,还是用时间吧

const timestamp = date.getFullYear() + (date.getMonth() + 1).toString() + date.getDate().toString() + date.getHours().toString() + date.getMinutes().toString() + date.getSeconds().toString();

我这是写的挺笨的,新手,我只是想记一下,它这个月跟Java一样从0开始,今天是二月十二号给我出来个一,我当时傻了一会,嘿嘿.还有一个事情就是:

年 date.getYear()
月 date.getMonth()
日 date.getDate() 这个不是getDay() ,day这个是一周的第几天

SharePoint的webpart初始化是这个方法

需要在页面一开始的时候用到的东西,要写在componentDidMount 这个里面

public componentDidMount(): void {
       this.getCurrentUserProfile();
       // 进入页面时设置默认值
       this.setPerson("Kyrie Gao");
       // 初始化时间 作为主键
       this.setTimeStamp()
   }

SharePoint 提交数据到List的方法

需要提交的数据,要写在request的请求里,然后调用API去存储.

//表单提交到另一个表的方法
    public submitTable(event) {
        const request: any = {};
        request.body = JSON.stringify({
            //表单数据
            hours: this.state.hours,
            vehicles: this.state.veh,
            amount: this.state.Amount,
            OData__x0025_: this.state.Percent,
            Staircase_x0025_: this.state.Staircase,
            Total: this.state.Total,
            lookupId: this.state.Id,
        });
        this.props.context.spHttpClient.post(
            this.props.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('calculation')/items`,
            SPHttpClient.configurations.v1,
            request)
            .then(
                (response: SPHttpClientResponse) => {
                    alert(response.status)
                })
        alert("submitTable执行完了")
    }

需要注意的是,在SharePoint的List里面,显示的列表项的名字会和在程序内部的不一样,比如有空格的话就是用ASCII码来表示,还有()这种也是,但自己去查是在太慢了,我的解决方案先给他查一遍,然后debug去看到底是啥名字.

查找SharePoint List的列表项

也是一样,调用API去查到列表项,

getbytitle('calculation') 这项是列表的名字
/items 后面不加任何参数是查询所有的列表项的值
?$select=ACEId ?是追加参数的意思,select相当于SQL里面的where条件
desc&$top 这个是倒序排列

public getListACE() {
        var getUrl = `${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('calculation')/items?$select=ACEId&$orderby=ACEId desc&$top`;
        this.props.context.spHttpClient
            .get(
                getUrl,
                SPHttpClient.configurations.v1
            )
            .then(
                (response: SPHttpClientResponse) => {
                    return response.json();
                }
            ).then(
                (response) => {
                    this.setState({ ACEId: response.value[0].ACEId })
                }
            ).then(
                () => { alert(this.state.ACEId) }
            )
    }

好了,以后再遇到,就不用在大海里捞针了,找资料来解决问题了,以后学会了还会更新这个文章,作为记录.

React小白 工作上的使用记录

下拉框 遍历生成