2

当用户更改输入值时，光标会移动到输入的最后。

我最初认为这是由onChange回调引起的，但它与问题无关。

我不确定还有什么导致这个问题。有任何想法吗？

SkuInput.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { selectVariant } from '../../../../../../redux/selectors/ProductOptions';
import { updateVariant } from '../../../../../../redux/actions/ProductOptions';
import { FormElement as Input } from '../../../../../shared/FormFields';

export const SkuInput = ({
  label,
  placeholder,
  value,
  required,
  disabled,
  invalid,
  policy,
  onChange
}) => (
  <Input
    label={label}
    placeholder={placeholder}
    value={value}
    required={required}
    disabled={disabled}
    validates={!invalid}
    policy={policy}
    onChange={onChange}
  />
);

SkuInput.propTypes = {
  index: PropTypes.number.isRequired,
  label: PropTypes.string,
  placeholder: PropTypes.string.isRequired,
  value: PropTypes.string,
  required: PropTypes.bool.isRequired,
  disabled: PropTypes.bool.isRequired,
  invalid: PropTypes.bool.isRequired,
  policy: PropTypes.shape({
    read: PropTypes.bool,
    write: PropTypes.bool,
    message: PropTypes.string
  }).isRequired,
  onChange: PropTypes.func.isRequired
};

export const selectLabel = state => {
  const { isMarketplacesVariantUniqueIdentifiersActive } = state.Config;

  if (!isMarketplacesVariantUniqueIdentifiersActive) {
    return null;
  }

  return state.ProductOptions.i18n.table_sku;
};

const mapStateToProps = (state, ownProps) => {
  const variant = selectVariant(state, ownProps);
  const invalid = 'sku' in (variant.errors || {});
  const policy = variant.policies.sku;

  return {
    label: selectLabel(state),
    placeholder: state.ProductOptions.i18n.grid_sku_placeholder,
    value: variant.sku,
    required: state.ProductOptions.config.skuRequired,
    disabled: !!variant.hidden,
    invalid,
    policy
  };
};

const mapDispatchToProps = (dispatch, { index }) => ({
  onChange: e => dispatch(updateVariant(index, { sku: e.target.value, errors: {} }))
});

export default connect(mapStateToProps, mapDispatchToProps)(SkuInput);

index.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { selectProductIdentifiersLabel } from '../../Header';
import SkuInput from './SkuInput';
import EditButton from './EditButton';

export const ProductIdentifiers = ({ index, label }) => (
  <div data-header={label} className='flex-2'>
    <div className='product-identifiers-container'>
      <SkuInput index={index} />
      <EditButton index={index} />
    </div>
  </div>
);

ProductIdentifiers.propTypes = {
  index: PropTypes.number.isRequired,
  label: PropTypes.string.isRequired
};

const mapStateToProps = state => ({
  label: selectProductIdentifiersLabel(state)
});

export default connect(mapStateToProps)(ProductIdentifiers);
4

0 回答 0