Как избежать правила 'no-param-reassign' с помощью handleChange для ввода? - PullRequest
Новая
       17

Как избежать правила 'no-param-reassign' с помощью handleChange для ввода?

0 голосов
/ 07 марта 2019

Я работаю над созданием React Textarea, которое автоматически увеличивается / уменьшается по мере ввода пользователем текста. Я создал свой компонент, вдохновленный этим кодом: https://codepen.io/Libor_G/pen/eyzwOx

Хотя у меня все работает хорошо, я получаю ошибку es-lint, но не знаю, как ее правильно решить. eslint не нравится, что я использую параметр события в функции handleChange.

Как правильно решить эту проблему?

Мой РЕАКТИЧЕСКИЙ UIC: 

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const TEXTAREA_LINE_HEIGHT = 24;
const PADDING = 16;

const StyledTextArea = styled.textarea`
  resize: none;
  width: 100%;
  padding: ${PADDING}px;

  line-height: ${TEXTAREA_LINE_HEIGHT}px;
  font-size: 17px;
`;


class TextArea extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      rows: 1,
      minRows: 1,
      maxRows: 3,
    };
  }

  handleChange = (event) => {
    const { minRows, maxRows } = this.state;


    const previousRows = event.target.rows;
    event.target.rows = minRows; // reset number of rows in textarea

    const currentRows = Math.floor((event.target.scrollHeight - (PADDING * 2)) / TEXTAREA_LINE_HEIGHT);

    if (currentRows === previousRows) {
      event.target.rows = currentRows;
    }

    if (currentRows >= maxRows) {
      event.target.rows = maxRows;
      event.target.scrollTop = event.target.scrollHeight;
    }

    this.setState({
      value: event.target.value,
      rows: currentRows < maxRows ? currentRows : maxRows,
    });
  };

  render = () => {
    const {
      name,
      placeholder,
    } = this.props;

    return (
      <StyledTextArea
        innerRef={(ref) => {
          this.textAreaRef = ref;
        }}
        name={name}
        placeholder={placeholder}
        rows={this.state.rows}
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

TextArea.defaultProps = {
  name: null,
  placeholder: null,
};

TextArea.propTypes = {
  name: PropTypes.string,
  placeholder: PropTypes.string,
};

export default TextArea;

1 Ответ

1 голос
/ 08 марта 2019

Вы можете отключить правило, как я уже упоминал в моем комментарии, например: /*eslint no-param-reassign: ["error", { "props": false }]*/

Или, если вы не хотите игнорировать eslint, вы можете назначить свой параметр новой переменной:

const ev = event, и вы можете использовать ev вместо события.

...