reactjs - componentWillReceiveProps 未在 Office 面板上触发

Question

我是 typeScript 和 React 的新手。我使用它在带有 Office UI 的 SharePoint 上进行开发 ( https://developer.microsoft.com/en-us/fabric )

当与父内部对象链接的道具更新时，我正在尝试更新 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}
                />

为父母。NumberField 控件解析数字值。在第一个所有作品中。当我在其中写入（输入格式）时，我的数字被解析为空间货币等。在第二个中，我以不同的方式使用它。他与第一个一样的本地变量映射，但变量是源而不是目标。我使用 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) });
    }

}

标签： reactjstypescript

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 ) } );
        }

    }