使用<条码> 活动:

   input: HTMLDivElement | null = null;

   onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
      //  keypress  event misbehaves on mobile so we track  Enter  key via  keydown  event
      if (event.key ===  Enter ) {
        event.preventDefault();
        event.stopPropagation();
        this.onSubmit();
      }
    }

    onSubmit = (): void => {
      if (input.textContent) {
         this.props.onSubmit(input.textContent);
         input.focus();
         input.textContent =   ;
      }
    }

    render() {
      return (
         <form className="commentForm">
           <input
             className="comment-input"
             aria-multiline="true"
             role="textbox"
             contentEditable={true}
             onKeyDown={this.onKeyDown}
             ref={node => this.input = node} 
           />
           <button type="button" className="btn btn-success" onClick={this.onSubmit}>Comment</button>
         </form>
      );
    }

import React, { useEffect, useRef } from  react ;

function Example() {

    let inp = useRef();
    useEffect(() => {
        if (!inp && !inp.current) return;
        inp.current.focus();
        return () => inp = null;
    });

    const handleSubmit = () => {
        //...
    }

    return (
        <form
            onSubmit={e => {
                e.preventDefault();
                handleSubmit(e);
            }}
        >
            <input
                name="fakename"
                defaultValue="...."
                ref={inp}
                type="radio"
                style={{
                    position: "absolute",
                    opacity: 0
                }}
            />
            <button type="submit">
                submit
            </button>
        </form>
    )
}

有时,由于表格可能没有任何投入,因此它不会仅仅约束一种形式,而将提交表格通过。

在这种情况下,如果您通过<编码>文件将活动与文件联系起来,就会在申请的另一部分造成问题。

为了解决这个问题,我们应该总结一个形式,并应当提出由 c所掩盖的内容,然后,你将注意力放在这一投入上,将正确工作。

If you don t have the form inside <form>, you could use this in componentDidMount():

componentDidMount = () => {
      document.addEventListener("keydown", (e) => 
        e.code === "Enter" && console.log("my function"))
    }
    
componentDidMount() //<-- remove this, it s just for testing here

useEffect(() => {
const keyEnter = event => {
      if (event.key ===  Enter ) {
        event.preventDefault()
      }
    }

    document.addEventListener( keydown , keyEnter)

    return () => {
      document.removeEventListener( keydown , keyEnter)
    }
    }, [])

I have found this to be easier. Listen for the keyDown event on the input you want to submit by pressing Enter" key and handle the submit action with conditional ternary operator as show below in a single line.
This is mostly used on subscribing a newsletter where there s no need of a button to submit. Hope it helps.

<input 
     type="email" 
     placeholder="Email" 
     onKeyDown={e => e.key ===  Enter  ? handleSubmit :   } />

您可使用<代码><button打字=提交和开发;</button>,在中间无。

www.un.org/Depts/DGACM/index_spanish.htm 你们只能改变纽子类 = 和;但必须提交。

    <form
        onSubmit={e => {
            e.preventDefault();
            handleSubmit(e);
        }}
       >
        <input
            name="developers"
            defaultValue="submit"
            ref={dev}
            type="radio"
        />
        <button type="submit">
            submit
        </button>
    </form>

在这里,非常选择的法典

useEffect(() => {
    document
        .getElementById("Your-element-id")
        .addEventListener("keydown", function (event) {
            if (event.code === "Enter" || event.code === "NumpadEnter") {
                event.preventDefault();
                document.getElementById("submit-element").click();
            }
        });
}, []);

您可以处理该问题。

   onKeyPress={e => e.key ===  Enter  && handleFormSubmit}

Try this:

const enterKye=()=>{
if(e.key==="Enter"){
  alert("hello");
  }
}

<input type="text" onKeyPress={enterKye}>

例如,下一期“React+TS”法(为州等添加“灯”):

type Props = {
...any properties
} & [any other type if need]

//I want notice that input data type of component maybe difference from type of props
const ExampleComponent: React.FC<Props> = (props: [Props or any other type]){
     const anySerice = new AnyService();

     const handleSubmit = async (eventForm) => {
        await anySerice.signUp();
     }

     const onKeyUp = (event: KeyboardEvent) => {
        //you can stay first condition only
        if (event.key ===  Enter  || event.charCode === 13) { 
            handleSubmit(event)
        }
    } 
    
    ...other code
    
    return (<Form noValidate validated={validated} className="modal-form-uthorize" onKeyPress={onKeyUp}>

    ...other components form

    </Form>)
}

export default ExampleComponent;