從按鈕單擊的輸入中獲取值並輸入按鍵反應

Question

我有一個反應組件

import React from 'react';
import classes from './Input.module.css';
import PlayCircleFilledWhiteIcon from '@material-ui/icons/PlayCircleFilledWhite';

export const Input = ({ trackHandler }) => {
    
    const handleTrack = (e) => {
        if(e.key === 'Enter') {
            trackHandler(e.target.value);
            e.target.value = '';
        }
    }

    return (
        <>
            <div className = {classes.forma}>
                <input 
                    type="text" 
                    maxLength = '30' 
                    placeholder = 'Enter tracker name' 
                    onKeyPress = {e => handleTrack(e)} 
                    className = {classes.inputText}
                />
                <PlayCircleFilledWhiteIcon className = {classes.btnSubmit}/>
            </div>
        </>
    )
}

Function trackHandler將值從輸入傳遞到另一個組件。 我需要通過兩種方式傳遞這個值：按鍵盤上的“Enter”鍵或單擊按鈕。 我已經實現了第一種方式，但我需要同時創建它們。 提前感謝您的幫助。

Answer 1

您可以使用 useRef 作為輸入的 ref 屬性。

const inputRef = useRef(null)

然后您可以訪問輸入值，如下所示：

inputRef.target.value

如果這首先不起作用，您應該將 inputRef 記錄到控制台，這是您需要的確切屬性。

Answer 2

你可以做這樣的事情。 使用useState掛鈎存儲輸入值並創建一個通用 function 將在按鈕單擊和回車鍵按下時調用。

import React, { useState } from "react";
import "./style.css";

const Input = ({}) => {
  const [val, setVal] = useState("");

  const handleTrack = () => {
    if (val.length !== 0) {
      // Do something with value
      console.log("got this:", val);
    }
  };

  const handleKeyPress = e => {
    if (e.key === "Enter") {
      handleTrack();
    }
  };

  return (
    <div>
      <input
        value={val}
        onChange={e => {
          setVal(e.target.value);
        }}
        onKeyPress={handleKeyPress}
      />
      <button
        onClick={() => {
          handleTrack();
        }}
      >
        Click
      </button>
    </div>
  );
};

export default function App() {
  return (
    <div>
      <Input />
    </div>
  );
}

Stackblitz： https://stackblitz.com/edit/react-vane9t