反应简单的键盘无法输入多个输入

Question

我有以下 Calculator.jsx 的代码，其中一切看起来 fine.The 我想要实现的主要目的是键盘仅在输入点击时显示，虽然已完成但键盘似乎没有输入以下代码看起来不错。是否有任何其他方法 show/hide 键盘仅在输入单击时以及使键盘能够键入。我的 Calculator.jsx 代码是 Calculator.jsx

import React, { useState, useRef, useEffect } from 'react';
import './Calculator.css'
import { Link } from 'react-router-dom';
import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css";

const Calculator = () => {
 

  
  const [inputs, setInputs] = useState({});
  const [layoutName, setLayoutName] = useState("default");
  const [inputName, setInputName] = useState("default");
  const keyboard = useRef();
    const [keyboardVisibility, setKeyboardVisibility] = useState(false);

  
    useEffect(() => {
      function clickHanlder(e) {
        if (
          !(e.target.nodeName === "INPUT") &&
          !e.target.classList.contains("hg-button") &&
          !e.target.classList.contains("hg-row")
        ) {
          setKeyboardVisibility(false);
        }
      }

      window.addEventListener("click", clickHanlder);
      return window.removeEventListener("click", clickHanlder, true);
    }, []);
  

  const onChangeAll = inputs => {
    
    setInputs({ ...inputs });
    console.log("Inputs changed", inputs);
  };

  const handleShift = () => {
    const newLayoutName = layoutName === "default" ? "shift" : "default";
    setLayoutName(newLayoutName);
  };

  const onKeyPress = button => {
    console.log("Button pressed", button);

   
    if (button === "{shift}" || button === "{lock}") handleShift();
  };

  const onChangeInput = event => {
    const inputVal = event.target.value;

    setInputs({
      ...inputs,
      [inputName]: inputVal
    });

    keyboard.current.setInput(inputVal);
  };

  const getInputValue = inputName => {
    return inputs[inputName] || "";
  };


  
    
    return (
        <div>
        <div className="bg">
         <div className="deposit">
            <div className="header">
             
             <h1>Deposit Calculator</h1>
                <div className="form">
                 <form  className="calculator">
                     <div className="form-group">
                    <label for="depositAmount">Deposit Amount:</label>
                    <span className="rupees">Rs</span>
                    <input className="IInput"
                     type="text"
                     name='depositAmount'
                          placeholder='0'
                          value={getInputValue("depositAmount")}
                        
                      onChange={onChangeInput}
                      onFocus={() => {
                         setKeyboardVisibility(true);
                        setInputName("depositAmount")
                      }}
                       
                        />
                                   
                     </div>
                      <div className="form-group">
                      <label for="interestRate">Interest Rate:</label>
                     <input className= "IIinput"
                     type="text"
                    name='Interest'
                                        placeholder='0'
                                        value={getInputValue("interestRate")}
                                        
                      onChange={onChangeInput}
                      onFocus={() => {
                        setKeyboardVisibility(true);
                        setInputName("interestRate")
                      }}
                     />
                                    
                                    
                     <span className= "percent">%</span>       
                </div>
                <div class="form-group">
                    <label for="Tenure">Tenure:</label>
                    <input className="Input"
                      type='number'
                      min='1'
                      max='5'
        
                      name='tenure'
                      placeholder='1 year'
                      value={getInputValue("tenure")}
                                  
                      onChange={onChangeInput}
                      onFocus={() => {
                        setKeyboardVisibility(true);
                        setInputName("tenure")
                      }}

                                        
                                        
                                       
                                    />
                                   
                                </div>
                  { keyboardVisibility && (
                                  <Keyboard
                                    keyboardRef={(r) => (keyboard.current = r)}
                                    layoutName={layoutName}
                                    onChange={onChangeAll}
                                    onKeyPress={onKeyPress}
                                  />
                                )}
                                  
                                    
                                   
                                  
                                
                                
                            </form>
                          
                           
                <button className="calculate">Calculate
                            </button>
                                 
                          
                
                
                        
             </div>
          <div className="given">
            <p >
            Total Deposit: Rs 0
         </p>
         <p>
        Interest: Rs 0
         </p>
         <p>
         Maturity Amount: Rs 0
                            </p>
                            
                        </div>
                       
                    </div>
                     
                   
                </div>
                
  </div>
 
 <Link to="/">
 <button className="Back">
  <i class="fas fa-angle-double-left"></i>
         </button>
     </Link>
        </div>
    );
};

export default Calculator;

Answer 1

您正在设置 inputs 状态，方法是将来自键盘 onChangeAll 的输入字符串传播到一个对象 setInputs({ ...inputs }) 中。如果我输入 ab 它将设置为 {0: "a", 1:"b"}.

将键盘中的 onChange 属性更新为 onChangeAll 并传递 inputName prop with your inputName state value. Read react-simple-keyboard DOCS.

onChangeAll

 const onChangeAll = (inputs) => {
    console.log("Inputs changed", inputs);
    setInputs(inputs);
  };

键盘

{keyboardVisibility && (
              <Keyboard
                keyboardRef={(r) => (keyboard.current = r)}
                layoutName={layoutName}
                onChangeAll={onChangeAll}
                onKeyPress={onKeyPress}
                inputName={inputName}
              />
            )}

CodeSandbox link