Question

我是typeScript和React的新手。使用它来使用Office UI（https://developer.microsoft.com/en-us/fabric）

在SharePoint上进行开发

我正在尝试更新与父内部对象链接的Props时更新CustomComponent值。

所以：

 <NumberField
                label="Quantité Engagement"
                value={this._item.BudgetEngagementDepenseQte}
                returnValue={this.OnQteEngagementChange}
                disabled= {this.props.readOnly}
            />
            <NumberField
                label="Montant total engagement"
                value={this._sumEngagement}
                returnValue= {() => {}}
                disabled={true}
                />

为父母。 NumberFieldContrôlParseNumber值。在第一个都工作。当我写入（输入格式）时，我的号码用空格货币等解析。在第二个我用不同的方式。他被映射为像第一个一样的本地可变，但变量是源而不是目的地。我使用componentWillReceiveProps来重新渲染它。（我试过这两种方法，但不是同时）：

   constructor(props) {
    super(props)
    this.state = {
        label : this.props.label ? this.props.label : '',
        disabled : this.props.disabled ? this.props.disabled : false,
        value : this.props.value ? this.props.value : ''
    }
    this.componentWillReceiveProps = ((nextProps) => {
        console.log(`nextprops state : ${nextProps.value}`  )
        this.setState({value : nextProps.value})
    }).bind(this);

}

@autobind
componentWillReceiveProps(nextProps) {  
        console.log(`nextprops state : ${nextProps.value}`  )
        this.setState({value : nextProps.value})
}

但是componentWillReceiveProps从不开火。有人看到我在哪里犯了错误吗？

这里是完整的NumberField类：

import * as React from 'react'
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { disableBodyScroll, autobind } from '@uifabric/utilities';
import {CustomFormat} from '../../Tools/CustomFormat'

export class NumberField extends React.Component<{
    label? : string,
    disabled? : boolean,
    value? : string,
    returnValue(value : string)
},{
    label : string,
    disabled : boolean,
    value : string,
}> {

    constructor(props) {
        super(props)
        this.state = {
            label : this.props.label ? this.props.label : '',
            disabled : this.props.disabled ? this.props.disabled : false,
            value : this.props.value ? this.props.value : ''
        }
        this.componentWillReceiveProps = ((nextProps) => {
            console.log(`nextprops state : ${nextProps.value}`  )
            this.setState({value : nextProps.value})
        }).bind(this);

    }

    @autobind
    componentWillReceiveProps(nextProps) {  
            console.log(`nextprops state : ${nextProps.value}`  )
            this.setState({value : nextProps.value})
    }

    render() {
        return(
            <TextField 
            label= {this.state.label}
            disabled={this.state.disabled}
            value={this.state.value}
            onChanged={this.onChanged}/>
        )
    }

    @autobind
    onChanged(value: string) {
        let _value = CustomFormat.ParseNumber(value);
        console.log(_value);
        this.props.returnValue(_value.toString())
        this.setState({ value : CustomFormat.formatNumber(_value) });
    }

}

Answer 1

我不熟悉面料但有打字稿，你不会自动装订。

在声明类方法时只需使用=>函数，它们将绑定到类上下文this

    import * as React from 'react'
    import { TextField } from 'office-ui-fabric-react/lib/TextField';
    import { CustomFormat } from '../../Tools/CustomFormat'

    interface INumberFieldProps
    {
        readonly label?: string;
        readonly disabled?: boolean;
        readonly value?: string;
        readonly returnValue: ( value: string ) => void;
    }

    interface INumberFieldState
    {
        readonly label: string;
        readonly disabled: boolean;
        readonly value: string;
    }

    export class NumberField extends React.Component<INumberFieldProps, INumberFieldState> {

        constructor( props )
        {
            super( props )
            this.state = {
                label: this.props.label ? this.props.label : '',
                disabled: this.props.disabled ? this.props.disabled : false,
                value: this.props.value ? this.props.value : '',
            }
        }

        public componentWillReceiveProps( nextProps )
        {
            console.log( `nextprops state : ${nextProps.value}` )
            this.setState( { value: nextProps.value } )
        }

        public render()
        {
            return (
                <TextField
                    label={this.state.label}
                    disabled={this.state.disabled}
                    value={this.state.value}
                    onChanged={this.onChanged} />
            )
        }

        // Notice the arrow shorthand function declaration 
        private onChanged = ( value: string ) =>
        {
            let _value = CustomFormat.ParseNumber( value );
            console.log( _value );
            this.props.returnValue( _value.toString() )
            this.setState( { value: CustomFormat.formatNumber( _value ) } );
        }

    }

componentWillReceiveProps未在Office Panel上触发

1 个答案: