1

Я создаю чипсы нажатием на клавишу запятая (","). Сейчас ширина каждого инпута у созданного чипса равна ширине сожержимого невидимого span. Однако при клике на запятую мой новый (последний) созданный чипс не равен ширине содержимого span (он гораздо больше). Он становиться верным только после того как я начну набирать текст для нового чипса. Как сделать так что-бы я нажал на запятую и новый созданный чипс имел ширину содержимого? Вот мой чипс компонент codesandbox - https://codesandbox.io/s/nameless-feather-sdz76?file=/src/chips-input.js

введите сюда описание изображения

/*код компонента*/
const ChipsInput = ({ value, onChange }) => {
  const [input, setInput] = useState("");
  const [chips, setChips] = useState([]);
  const spanEl = useRef(5);

  const changeHandler = (event) => {
    setInput(event.target.value);
  };

  const handleKeyDown = (event) => {
    if (event.key === ",") {
      event.preventDefault();
      setChips([...chips, event.target.value]);
      setInput("");
    }
  };

  return (
    <div className="chips_input">
      <div className="wrapper">
        {chips.map((chip, index) => (
          <ChipsItem chip={chip} key={index} />
        ))}
        <div className="container">
          <span className="hide_el" ref={spanEl}>
            {input}
          </span>
          <input
            className="input"
            type="text"
            value={input}
            onChange={changeHandler}
            style={
              input.length !== 0
                ? { width: spanEl.current.offsetWidth + "px" }
                : { width: "2px" }
            }
            onKeyDown={handleKeyDown}
          />
        </div>
      </div>
    </div>
  );
};

/*код каждого чипса*/
const ChipsItem = ({ index, chip }) => {
  const [item, setItem] = useState(chip);
  const hideEl = useRef(5);

  const handleInputChip = (event) => {
    setItem(event.target.value);
  };

  return (
    <div className="wrap" key={index}>
      <span className="hide_item" ref={hideEl}>
        {item}
      </span>
      <input
        type="text"
        value={item}
        className="input-chip"
        onChange={handleInputChip}
        style={{ width: hideEl.current.offsetWidth + "px" }}
      />
      <span className="remove">×</span>
    </div>
  );
};

1 ответ 1

1

Причина такого поведения в том, что при первой отрисовке компонента const hideEl = useRef(5) равен 5.

Ширину можно вынести в отдельное состояние и с помощью useEffect обновлять ширину. Пример:

import "./chips-item.css";
import { useState, useRef, useEffect } from "react";
import React from "react";

const ChipsItem = ({ index, chip }) => {
  const [item, setItem] = useState(chip);
  const [width, setWidth] = useState(0); // состояние ширины
  const hideEl = useRef();

  const handleInputChip = (event) => {
    setItem(event.target.value);
  };

  useEffect(() => {
    setWidth(hideEl.current.offsetWidth) // запись новой ширины
  }, [item])


  return (
    <div className="wrap">
      <span className="hide_item" ref={hideEl}>
        {item}
      </span>
      <input
        type="text"
        value={item}
        className="input-chip"
        onChange={handleInputChip}
        style={{ width: width + "px" }}
      />
      <span className="remove">×</span>
    </div>
  );
};

export default ChipsItem;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.