Javascript 如何修复'；在react js'；中使用带有复选框的enter键进行按键；

我必须启用enter键来选中我页面中组件复选框的复选框。事件是按照以下代码创建和尝试的，但它没有按照要求正常工作

<div style={{ paddingTop: '0px' }}>
    <CheckBox
        onClick={() => { this.handleClick(); }}
        inlineCBStyle={{ display: 'flex', alignItems: 'center' }}
        name={'edgeTerms' + this.props.line}
        id={'edgeTerms' + this.props.line}

        onKeyPressed={(e) => {
            if (e.keyCode === '13' || e.keyCode === '33') {
            this.edit();
            e.preventDefault();
            }
        }}
        checked={this.state.agreementChecked}
        ariaLabel="payment agreement"
    >
        <span className="caption color_gray_six">{userConsent}</span>
    </CheckBox>
</div>

{this.handleClick（）；}}
inlineCBStyle={{display:'flex'，alignItems:'center'}}
name={'edgeTerms'+this.props.line}
id={'edgeTerms'+this.props.line}
onKeyPressed={（e）=>{
如果（e.keyCode=='13'| | e.keyCode==='33'）{
这是edit（）；
e、 预防默认值（）；
}
}}
checked={this.state.agreementChecked}
ariaLabel=“付款协议”
>
{用户同意}

这是复选框的组件

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
// import { Row, Col } from 'react-flexbox-grid';
import '../../assets/css/common/checkbox.css';

class Checkbox extends React.Component { // eslint-disable-line
  render() {
    return (
      <Fragment>
        <div className="" style={this.props.inlineCBStyle}>
          <div style={{ display: 'flex', alignSelf: 'flex-start' }}>
            <input
              type="checkbox"
              id={this.props.id}
              disabled={this.props.disabled}
              className="checkbox"
              value={this.props.id}
              name={this.props.name}
              onClick={this.props.onClick}
              checked={this.props.checked}
              defaultChecked={this.props.defaultChecked}
              analyticstrack={this.props.analyticstrack}
              aria-label={this.props.ariaLabel}
              tabIndex="0"
              role="checkbox"
              aria-checked={this.props.checked}
            />
            <label htmlFor={this.props.id} style={{ display: 'flex' }}><span className="checkboxOnlySpan"></span>{this.props.children}</label>
          </div>
          {/* <div style={{ padding: '0 0 0 8px' }}>
            <label htmlFor={this.props.id} style={this.props.inlineLBLStyle}>{this.props.children}</label>
          </div> */}
        </div>
      </Fragment>
    );
  }
}

Checkbox.defaultProps = {
  type: 'checkbox',
  disabled: false,
  children: '',
  name: '',
  onClick: () => (false),
  defaultChecked: false,
  analyticstrack: '',
  ariaLabel: ''
};

Checkbox.propTypes = {
  id: PropTypes.string.isRequired,
  children: PropTypes.any,
  name: PropTypes.string,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  defaultChecked: PropTypes.bool,
  inlineCBStyle: PropTypes.object,
  analyticstrack: PropTypes.string,
  checked: PropTypes.any,
  ariaLabel: PropTypes.string
};


export default Checkbox;

import React，{Fragment}来自'React'；
从“道具类型”导入道具类型；
//从'react flexbox grid'导入{Row，Col}；
导入“../assets/css/common/checkbox.css”；
类复选框扩展React.Component{//eslint disable行
render（）{
返回(
{this.props.children}
{/* 
{this.props.children}
*/}
);
}
}
Checkbox.defaultProps={
键入：“复选框”，
残疾人士:错,，
儿童：''，
名称：“”，
onClick:（）=>（false），
defaultChecked:false，
分析列：“”，
标签：“”
};
Checkbox.propTypes={
id:PropTypes.string.isRequired，
孩子们：任何人，
名称：PropTypes.string，
禁用：PropTypes.bool，
onClick:PropTypes.func，
defaultChecked:PropTypes.bool，
inlineCBStyle:PropTypes.object，
analyticstrack:PropTypes.string，
选中：PropTypes.any，
ariaLabel:PropTypes.string
};
导出默认复选框；

---

目前空格键正在选中复选框，我想同时启用enter键

您可以在

input

上使用

onKeyPress

或直接在

input

上使用

onKeyPress

，而不是从父组件作为道具传递

class Checkbox extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
       this.props.handleKeyPress()
    }
  }

  render() {
    return <input type="checkbox" onKeyPress={this._handleKeyDown} />
  }
}

您可以从父组件传递

\u handleKeyDown

class Checkbox extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
       this.props.handleKeyPress()
    }
  }

  render() {
    return <input type="checkbox" onKeyPress={this._handleKeyDown} />
  }
}