javascript - 即使我试图保持文本区域失去焦点

Question

我遇到了一个非常有趣的情况。 这是我的组件:

export const checkbox = ({ data }) => {
    const inputRef = useRef(null);
    
    console.log(inputRef); // Does not appear
    return (
            <FormGroup>
                {data.data.map(item => (
                        <FormGroup>
                            <Input
                                ref={inputRef}
                            />
                        </FormGroup>
            </FormGroup>
    );
};

它是其他组件的子组件，它基本上获取值并提交到表单。

但是没有用.. 我怎样才能解决这个问题？我只需要它来保持焦点，这样我就可以继续打字。我应该使用 React.memo()为了这？ 另外，请注意，我已经检查了我能找到的所有引用资料，但没有任何帮助。我为此花了 3 天。

Answer 1

根据我们的聊天，根本原因是具有动态 key 属性的元素，该属性在每次渲染时都会发生变化。这导致每次更改事件都会呈现一个新的 textarea 元素，并且新元素没有焦点。

解决方案是使用在渲染之间不会改变的确定性 key 。