如何使用输入的 handleChange 避免 'no-param-reassign' 规则？

Question

我正在努力构建一个在用户键入时自动 grows/shrinks 的 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;

Answer 1

您可以禁用我在评论中提到的规则，如下所示： /*eslint no-param-reassign: ["error", { "props": false }]*/

或者如果你不想忽略 eslint，你可以将你的参数分配给一个新变量：

const ev = event 并且您可以使用 ev 而不是 event。

如何使用输入的 handleChange 避免 'no-param-reassign' 规则？

How to avoid the 'no-param-reassign' rule with a input's handleChange?

javascript

reactjs

eslint

styled-components