Question

我有此代码：

参考：

const metaRef = useRef( null );
    const urlRef = useRef( null );
    const descRef = useRef( null );

（这些参考被分配给3个不同的HTML范围）

const handlePixelChange = ( value ) => {
        console.log( value );
    };

    const handleInputChange = ( e ) => {

        const pixelLengthBundled = {
            title: metaRef.current.getBoundingClientRect().width.toFixed(),
            url: urlRef.current.getBoundingClientRect().width.toFixed(),
            desc: descRef.current.getBoundingClientRect().width.toFixed()
        };

        handlePixelChange( pixelLengthBundled );

（此代码是onChange，位于三个不同的输入字段上，其中先前的span元素是输入字段内文本的宽度。因此，如果用户键入“ Hello”，则span元素就是文本的宽度我在handleInputChange函数内部捕获的“ Hello”被捆绑到一个对象中，并将其发送给另一个函数。

我的问题：

当我记录参考宽度的值时，它总是落后一步。例如：

用户输入一个字符，当记录该值时，它说宽度为（span元素的）0，但是当检查span元素时，它为5像素宽。然后输入第二个字符时，它将显示宽度为5像素，就像开始时一样。

我在这里想念什么？

Answer 1

您可以在输入元素中添加另一个ref，然后使用自动宽度样式获取输入宽度

component.css

input {
    display: inline-block;
    width: auto !important;
}

component.jsx

const inputRef = useRef(null); // Assign this ref to your input

...

const handleInputChange = ( e ) => {
    const inputWidth = e.target.getBoundingClientRect().width.toFixed();
    /* or const inputWidth = inputRef.current.getBoundingClientRect().width.toFixed(); */
    /* Rest of code */
}

Answer 2

我刚刚遇到了同样的问题。到目前为止，我发现的唯一解决方案是检查useLayoutEffect内的宽度，然后存储该值。

示例：

const [width, setWidth] = React.useState(0);

React.useLayoutEffect(() => {
  setTimeout(() => setWidth(imageRef.current.getBoundingClientRect().width),
    100
  );
});

在更改时反应ref.current.getBoundingClientRect（）。width总是落后一步

2 个答案: