React-光标跳至输入结尾

问题描述

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

我最初以为这是由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,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);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）