javascript - 如何修复'在反应js中带有复选框的带有回车键的按键'

Question

我必须启用回车键才能检查页面中组件复选框的复选框。该事件已创建并尝试了以下代码，但根据要求无法正常工作。

<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>

这是复选框的组件

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;

目前空格键正在检查复选框，我也想启用输入键

标签： javascripthtmlreactjsreact-reduxreact-router

Answer 1

您可以使用onKeyPressoninput或onKeyPressed直接 oninput而不是从父组件作为 props 传递。

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

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

使用onKeyPress

<input
    type="checkbox"
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.props.handleKeyPress()
                }
              }}
/>

您可以_handleKeyDown从父组件传递。