ràng buộc chính trong react.js

Question

đang cố gắng triển khai ràng buộc khóa trong react.js. đã làm một số nghiên cứu, nhưng vẫn tự hỏi cách sạch nhất để làm điều đó là gì. Ví dụ,

if (event.keyCode == 13 /*enter*/) { 
    function() 
} 
if (event.keyCode == 27 /*esc*/) { 
    anotherfunction() 
} 

Answer 1

tôi đã kết thúc ràng buộc sự kiện KeyDown khi các thành phần gắn kết và lắp ráp:

...

componentDidMount: function() { 
    $(document.body).on('keydown', this.handleKeyDown); 
}, 

componentWillUnMount: function() { 
    $(document.body).off('keydown', this.handleKeyDown); 
}, 

handleKeyDown: function(event) { 
    if (event.keyCode == 13 /*enter*/) { 
    this.okAction(); 
    } 
    if (event.keyCode == 27 /*esc*/) { 
    this.cancelAction(); 
    } 
}, 

render: function() { 
    return this.state.showDialog ? (
    <div className="dialog" onKeyDown={this.handleKeyDown}> 

...

Có lẽ một cách tốt hơn để làm điều này. Hàm được sử dụng như một phần của thành phần hộp thoại: https://github.com/changey/react-dialog

Answer 2

Chưa có đủ đại diện để nhận xét về câu trả lời của bạn, nhưng tôi muốn đề xuất cải tiến.

Hãy thử sử dụng tính năng đặt tên sự kiện khi bạn liên kết/hủy liên kết các mục này. Điều này đặc biệt quan trọng khi ràng buộc sự kiện cho cơ thể, vì nó cho phép bạn để unbind mà không phá vỡ bất kỳ ràng buộc khác cùng loại:

Xem:
https://css-tricks.com/namespaced-events-jquery/

componentDidMount: function() { 
    $(document.body).on('keydown.awesomeNamespaceName', this.handleKeyDown); 
}, 

componentWillUnMount: function() { 
    $(document.body).off('keydown.awesomeNamespaceName', this.handleKeyDown); 
}, 

handleKeyDown: function(event) { 
    if (event.keyCode == 13 /*enter*/) { 
    this.okAction(); 
    } 
    if (event.keyCode == 27 /*esc*/) { 
    this.cancelAction(); 
    } 
}, 

Answer 3

Đây là thành phần tìm kiếm của tôi, xin vui lòng hãy xem hàm onSearch. Tôi đang sử dụng không có ràng buộc bàn phím để hoàn thành đầu vào xóa khóa thoát và làm mất nét.

import React from "react" 
import _debounce from "lodash.debounce" 
import "./stylesheets/search" 

export default class Search extends React.Component { 

    displayName = "Search" 

    static propTypes = { 
    bucketName: React.PropTypes.string, 
    placeholder: React.PropTypes.string, 
    onSearchUpdated: React.PropTypes.func, 
    } 

    state = { 
    search: "", 
    placeholder: "Search", 
    bucketName: "", 
    } 

    componentWillMount() { 
    this.delayedCallback = _debounce((event) => { 
     let search = event.target.value 
     this.setState({ 
     search, 
     }) 
     this.props.onSearchUpdated(search, this.props.bucketName) 
    }) 
    } 

    onSearch = (event) => { 

    if (event.keyCode === 27) { 
     event.target.value = '' 
     this.refs.input.blur() 
    } else { 
     this.refs.input.focus() 
    } 

    event.persist() 
    this.delayedCallback(event) 
    } 

    render() { 
    return (
     <div className="search"> 
     <div className="row"> 
      <div className="col-xs-12 search__container form-group"> 
      <input 
       ref="input" 
       className="form-control search__field" 
       placeholder={this.props.placeholder} 
       name="search__field" 
       id="search__field" 
       type="text" 
       onKeyDown={this.onSearch} 
      /> 
      </div> 
     </div> 
     </div> 
    ) 
    } 
} 

Answer 4

bước 1: Xác định nó trong constructor

constructor(props) { 
    super(props); 

    this.state = {   
    } 
    this.handleEnterKeyPress = this.handleEnterKeyPress.bind(this) 
    } 

bước 2: Viết nó trong Phương thức render

render() { 
      return (    
        <input className ="pageText" type="text" value= "value" onKeyPress = {this.handleEnterKeyPress} />      
      ) 
      } 

bước 3: viết hàm tương ứng trong lớp

handleEnterKeyPress(e) { 
    if (e.charCode == 13) { 
     // your code 
    } 
    }