Блог

у меня есть настраиваемая цифровая панель и поле ввода, и я хочу, чтобы при нажатии пользователем любого числа оно отображалось в поле ввода.

 <div class="grid-container">
  <button class="grid-item" onClick={inputNumKey}>1</button>
  <button class="grid-item" onClick={inputNumKey}>2</button>
  <button class="grid-item" onClick={inputNumKey}>3</button>  
  <button class="grid-item" onClick={inputNumKey}>4</button>
  <button class="grid-item" onClick={inputNumKey}>5</button>
  <button class="grid-item" onClick={inputNumKey}>6</button>  
  <button class="grid-item" onClick={inputNumKey}>7</button>
  <button class="grid-item" onClick={inputNumKey}>8</button>
  <button class="grid-item" onClick={inputNumKey}>9</button>  
  <button class="grid-item" onClick={inputNumKey}>*</button>  
  <button class="grid-item" onClick={inputNumKey}>0</button>  
  <button class="grid-item" onClick={inputNumKey}>#</button>  
</div>
 

это мой код numpad jsx.

  <div className="input-box-ad">
          <input onChange={changeTime} name="hour" value={updatedHour} />
          <input onChange={changeTime} name="minute" value={updatedMinute} />
          <input onChange={changeTime} name="second" value={updatedSecond} />
        </div>
 

это поля ввода, которые мне нужны для значений этой кнопки.
для получения более подробной информации у меня также есть codesandbox — https://codesandbox.io/s/fancy-frog-l5uo2

 const activeInput = { "background-color": "#BBFFCC" };

const Numbers = () => {
  const [hour, setHour] = useState("00");
  const [minute, setMinute] = useState("00");
  const [second, setSecond] = useState("00");
  const [timeType, setTimeType] = useState("hour");

  const press = (k) => {
    const [value, setter] =
      timeType === "hour"
        ? [hour, setHour]
        : timeType === "minute"
        ? [minute, setMinute]
        : [second, setSecond];
    setter((value.charAt(value.length - 1) || "0")   k);
  };

  return (
    <div>
      <div class="grid-container">
        <button onClick={() => press("1")}>1</button>
        <button onClick={() => press("2")}>2</button>
        <button onClick={() => press("3")}>3</button>
        <button onClick={() => press("4")}>4</button>
        <button onClick={() => press("5")}>5</button>
        <button onClick={() => press("6")}>6</button>
        <button onClick={() => press("7")}>7</button>
        <button onClick={() => press("8")}>8</button>
        <button onClick={() => press("9")}>9</button>
        <button onClick={() => press("*")}>*</button>
        <button onClick={() => press("0")}>0</button>
        <button onClick={() => press("#")}>#</button>
      </div>
      <div className="input-box-ad">
        <input name={"hour"} value={hour} size={2}
          onClick={() => setTimeType("hour")}
          onChange={(e) => setHour(e.target.value)}
          style={timeType === "hour" ? activeInput : {}}
        />
        :
        <input name={"minute"} value={minute} size={2}
          onClick={() => setTimeType("minute")}
          onChange={(e) => setMinute(e.target.value)}
          style={timeType === "minute" ? activeInput : {}}
        />
        :
        <input name={"second"} value={second} size={2}
          onClick={() => setTimeType("second")}
          onChange={(e) => setSecond(e.target.value)}
          style={timeType === "second" ? activeInput : {}}
        />
      </div>
    </div>
  );
};
 

Управлять этим будет очень сложно. Я не знаю, зачем вам нужны кнопки для ввода, вы можете сделать это с помощью клавиатуры.

Если вы сделаете это с помощью клавиатуры, это будет легко.

 const[updatedHour,setUpdatedHour] = useState();

function changeHour(e){
    setUpdatedHour(e.target.value)
  }

<input onChange={changeHour} name="hour" value={updatedHour} />
 

Сделайте то же самое для всех полей ввода.

Тем не менее, если вы хотите сделать это с помощью кнопок, вот подсказка.

 function inputNumKey(e){
    console.log(e.target.textContent)
  }