如何克隆状态变量以用作反应中的参考？

Question

这个问题我找不到很好的答案，但我解决了；这是问题：

如果不在焦点中，我希望重置输入元素

type Props = {
    inputRef: any;
    value: string;
    setValue: Function;
}

const inputField = (props: Props) => {
    let tempValue = props.value;
    
    return(
        <input
            ref= {props.inputRef}
            onChange= {e => 
                props.setValue(e.target.value);
            }
            value= {props.value}
            onBlur={ () => {
                props.setValue(tempValue);
            }}
        />
    )
}

但由于某种原因它没有清除值

p.s。 inputRef、value 和 setValue 是 hooks

const [value, setValue] = useState(...);
inputRef = useRef<HTMLInputElement>(null);

Answer 1

给定的方法不起作用，因为元素中的变量未使用 DOM 更新。

创建一个临时状态变量。

type Props = {
    inputRef: any;
    // value removed because it's not necessary
    // setValue not necessary because value is no longer being changed, the
    // value will be changed in a seperate method that's called in someway
    // on the outer scope
}

const inputField = (props: Props) => {  
    const [value, setValue] = useState(""); // adding the useState hook here gives a inscope temp value
    return(
        <input
            ref= {props.inputRef}
            onChange= {e => 
                setValue(e.target.value);
            }
            value= {value}
        />
    )

它将设置为您调用该方法时初始化的任何值。您可以设置超出范围的动态默认值 (useState("") -> useState(defaultValue))。此解决方案还允许 innerscope 值不影响输入所需的 outerscope 值，因此隔离输入字段并为某些 onSubmit(value: string) 超出范围的方法提供更多控制。

如何克隆状态变量以用作反应中的参考？

How to clone a state variable to use as a reference in react?

focus

input

blur

typescript

reactjs