Nhập bộ xử lý sự kiện quan trọng vào thành phần đầu vào phản ứng

Question

Tôi có thành phần Input có nút (buttonAfter thuộc tính), tôi đặt một bộ xử lý onClick liên quan đến nút và người dùng có thể nhập một số văn bản và bấm nút để kích hoạt hoạt động.

Tuy nhiên, tôi muốn người dùng có thể nhấn phím [Enter] (mã khóa 13) để đạt được hiệu ứng tương tự như nhấp vào nút, chỉ để làm cho giao diện người dùng dễ sử dụng hơn.

Tôi không thể tìm cách để làm điều đó, tất nhiên tôi đã thử onKeydown để đăng ký trình xử lý cho sự kiện chính nhưng nó chỉ bị bỏ qua.

Answer 1

Tôi nghĩ câu hỏi này liên quan đến React thay vì phản ứng-bootstrap.

Nhìn này đối với một số vấn đề cơ bản về Phản ứng hệ thống sự kiện: https://facebook.github.io/react/docs/events.html

Khi bạn sử dụng onKeyDown, OnKeyPress hoặc onKeyUp Phản ứng sẽ vượt qua để xử lý của bạn một thể hiện của nói "mục tiêu" đối tượng với các thuộc tính sau:

altKey boolean
số charCode
... (cho tất cả thấy liên kết ở trên)

vì vậy, bạn có thể làm một cái gì đó như thế này:

01.

import React, { PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
import { Input } from 'react-bootstrap'; 

class TestInput extends React.Component { 

handleKeyPress(target) { 
    if(target.charCode==13){ 
      alert('Enter clicked!!!');  
    } 

} 

render() { 
    return (
    <Input type="text" onKeyPress={this.handleKeyPress} /> 
); 
} 
} 

ReactDOM.render(<TestInput />, document.getElementById('app')); 

Tôi đã thử nghiệm mã trên và nó hoạt động. Tôi hy vọng điều này là hữu ích cho bạn.

bye

Answer 2

Câu hỏi này cũng có thể liên quan đến React-bootstrap. React-bootstrap cũng có một cách để xử lý trường hợp khi một nút hoặc nhập phím hoặc bất kỳ phần tử biểu mẫu nào được nhấn.

Mã dưới đây giải thích làm thế nào để xử lý một thể hiện khi enterkey được nhấn mà không cần sự tham gia của Phản ứng Handlers. (Và làm cho nó mát)

import React from "react"; 
import ReactDOM from "react-dom"; 
import { FormGroup, FormControl } from "react-bootstrap"; 

class TestInput extends Component { 

    search() { 
    console.log("Enter Button Pressed"); 
    } 

    render() { 
    return (
     <FormGroup> 

     <InputGroup> 
      <FormControl 
      placeholder="Press Enter" 
      type="input" 
      onKeyPress={event => { 
       if (event.key === "Enter") { 
       this.search(); 
       } 
      }} 
      /> 
     </InputGroup> 

     </FormGroup> 
    ); 
    } 
} 

Phản ứng Bootstrap không hỗ trợ yếu tố hình thức đầu vào nữa. Thay vào đó, nó giới thiệu các mục bên dưới theo ý của bạn

Thành phần FormGroup bao bọc điều khiển biểu mẫu với khoảng cách thích hợp, cùng với hỗ trợ cho nhãn, văn bản trợ giúp và trạng thái xác thực.

Quấn điều khiển biểu mẫu của bạn trong Nhóm nhập liệu, sau đó sử dụng cho tiện ích bổ sung bình thường và cho tiện ích bổ sung nút.

Thành phần FormControl hiển thị điều khiển biểu mẫu với kiểu dáng Bootstrap.

Tài liệu tham khảo:

https://react-bootstrap.github.io/components.html#forms https://react-bootstrap.github.io/components.html#forms-input-groups