CODEWITHSUNDEEP
reactjs
How to Program
How to Program

Reputation: 389

get input value using custom numbers in react

i have custom numpad and input box and i want that when user click any number it shows in input field.

<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>

this is my numpad jsx code.

 <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>

this is input fields i want values of this button. for more details i have codesandbox also - https://codesandbox.io/s/fancy-frog-l5uo2

Upvotes: 1

Views: 80

Answers (2)

Nikita Skrebets
Nikita Skrebets

Reputation: 1538

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>
  );
};

Upvotes: 1

Chirag Borawake
Chirag Borawake

Reputation: 55

This is going to be very difficult to manage. I don't know why do you need the buttons to enter input you can do it with the keyboard.

If you do it with a keyboard then it will be easy.

const[updatedHour,setUpdatedHour] = useState();

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

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

Do the same for all input boxes.

Still, if you want to do it with buttons here is a hint.

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

Upvotes: 1

Related Questions