首页 > 解决方案 > SharePoint 反应 TextField onChanged 错误

问题描述

当“gulp serve”我的 SharePoint 扩展解决方案时,我收到此错误

类型{标签:字符串;要求:真;名称:字符串;默认值:字符串;onChanged: (text: string) => void; } 不可分配给类型 'IntrinsicAttributes & ITextFieldProps & { children?: ReactNode; }'。类型'IntrinsicAttributes & ITextFieldProps & { children?: ReactNode; 上不存在属性'onChanged' }.ts(2322)

我在用:

@microsoft/generator-sharepoint@1.10.0 gulp@4.0.2 npm@6.14.4 yo@3.1.1

SendEMailDialogContent.tsx 文件代码如下:

import * as React from 'react';
import {
    TextField,
    PrimaryButton,
    Button,
    DialogFooter,
    DialogContent,
    Spinner,
    SpinnerSize
} from 'office-ui-fabric-react';
import { ISendEMailDialogContentProps } from './ISendEMailDialogContentProps';
import { EMailProperties, EMailAttachment } from '../models';
import { ISendEMailDialogContentState } from './ISendEMailDialogContentState';

export class SendEMailDialogContent extends React.Component<ISendEMailDialogContentProps, ISendEMailDialogContentState> {
    private _eMailProperties: EMailProperties;

    constructor(props) {
        super(props);
        this.state = {
            isLoading: false
        };
        this._eMailProperties = this.props.eMailProperties;        
        this._onChangedTo = this._onChangedTo.bind(this);
        this._onChangedSubject = this._onChangedSubject.bind(this);
        this._onChangedBody = this._onChangedBody.bind(this);
        this._submit = this._submit.bind(this);
    }

    public render(): JSX.Element {
        var getDialogContent = () => {
            if (this.state.isLoading) {
                return (
                    <Spinner size={SpinnerSize.large} label="loading..." ariaLive="assertive" />
                );
            }
            else {
                return (
                    <div>
                        <TextField label='To' required={true} name="To" defaultValue={this._eMailProperties.To} onChanged={this._onChangedTo} />
                        <TextField label='Subject' required={true} defaultValue={this._eMailProperties.Subject} onChanged={this._onChangedSubject} />
                        <TextField label='Body' required={true} multiline defaultValue={this._eMailProperties.Body} onChanged={this._onChangedBody} />

                        <DialogFooter>
                            <Button text='Cancel' title='Cancel' onClick={this.props.close} />
                            <PrimaryButton text='OK' title='OK' onClick={this._submit} />
                        </DialogFooter>
                    </div>);
            }
        };
        // UI
        return <DialogContent
            title='Send E-Mail Details'
            subText=''
            onDismiss={this.props.close}
            showCloseButton={true}
        >
            {getDialogContent()}
        </DialogContent>;
    }

    private _onChangedSubject(text: string) {
        this._eMailProperties.Subject = text;
    }    

    private _onChangedTo(text: string) {
        this._eMailProperties.To = text;
    }    

    private _onChangedBody(text: string) {
        this._eMailProperties.Body = text;
    }

该错误与 TextField 有关 - onChanged={this._onChangedxxxxx}

标签: sharepoint-onlinespfxoffice-ui-fabric-react

解决方案


根据使用的版本office-ui-fabric-react,现在可能会调用此回调onChange而不是onChanged.

除了被重命名,onChange期望第一个参数是一个反应事件,所以你需要改变你的onChanged*方法来期望更多的参数(他们可以自由地忽略它)。

相关文档:https ://developer.microsoft.com/en-us/fluentui#/controls/web/textfield#implementation


推荐阅读