Question

我已经阅读了与此问题有关的所有堆栈溢出问题，还有official react post和首选解决方案。
不建议再使用componentWillReceiveProps！

在您将此问题标记为重复之前，请先了解我的特定问题，但我没有看到针对该特定问题的任何解决方案。

我想要做的很简单：
我有一个组件KInputRange， 接收了 道具的值，而发送的值（回调） onEnter事件（仅在输入时才将值发送到服务器） props.value可以随机更改（来自服务器的websocket）

我的问题：
在我的组件内部，<input>值属性将从props或state中获取数据吗？

如果来自道具： 用户输入输入数据时，如何在内部更新值？

如果来自州： 如果props.value从服务器随机更改，如何更新新值？

实际上我需要在道具变更时更新我的内部状态但是今天，如果反应说那是反模式，怎么办？

到目前为止，这是我的代码：

class KInputRange extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
    }

    private onKeyDown(e: any): void {
        //If the key is enter call to props.onEnter with the current value

    }

    private onChange(e: any): void {
        //if user change the value- change the internal value
    }

    public render() {
        return (
            <input value={?????} type="text" onChange={(e) => this.onChange(e)} onKeyDown={(e) => this.onKeyDown(e)}/>
        );
    }
}

用法：

   <KInputRange value={this.state.dataFromTheServer}   onEnter={(val: number) => this.kInputRangeEnterClicked(val)}/>

Answer 1

您可以使用此处链接的帖子中提到的function component。要在内部更新值，可以使用React's State Hook。

类似这样的东西：

import React, { useState } from 'react';

const KInputRange = (props) => {

    const [value, setValue] = useState(props.value);

    function onKeyDown(e: any): void {
        //If the key is enter call to props.onEnter with the current value
    }

    function onChange(e: any): void {
        setValue(e.target.value);
    }

    return (
            <input value={value} type="text" onChange={(e) => this.onChange(e)} onKeyDown={(e) => this.onKeyDown(e)}/>
    );
}

Answer 2

首先，正如@Atul所说，您确实需要使用getDerivedStateFromProps。这是因为您需要根据道具和内部状态来控制组件值。假设您使用流程，那么这段代码应该会有所帮助：

// @flow
import * as React from "react";

type Properties = {
    remoteValue: string,
    onSubmit: (value: string) => void
};

type State = {
    remoteValueMemo: string,
    internalValue: string
};

class KInputRange extends React.Component<Properties, State> {

    static defaultProps = {
        remoteValue: "",
        onSubmit: () => {}
    };

    state = {
        remoteValueMemo: this.props.remoteValue,
        internalValue: this.props.remoteValue
    };

    static getDerivedStateFromProps(props: Properties, state: State) {
        if (state.remoteValueMemo !== props.remoteValue) {
            return {
                remoteValueMemo: props.remoteValue,
                internalValue: props.remoteValue};
        }
        return null;
    }

    handleValueChange = (event: SyntheticEvent<HTMLInputElement>) => {
        this.setState({internalValue: event.currentTarget.value});
    };

    handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
        if (event.keyCode === 13) {
            this.props.onSubmit(this.state.internalValue);
        }
    };

    render(): React.Node {
        const {internalValue} = this.state;

        return (
            <input value={internalValue} onChange={this.handleValueChange} onKeyDown={this.handleKeyDown}/>
        );
    }
}

export default KInputRange;

Answer 3

传递给useState的参数不用于在重新渲染时更新状态。

您应该使用 useEffect 挂钩。

capture

此处类似的主题：React.useState does not reload state from props

Answer 4

每当需要对功能组件中的特定道具更改进行某些操作时，都可以使用useEffect反应钩子

useEffect(() => {
    // You can place your logic here to run whenever value changes 
},[value]);

[value]是一个依赖项，因此只要值更改，您就可以使用效果钩子调用

上面的希望对您有帮助。

反应-道具更新状态已更改-输入元素

4 个答案: