Question

我实际上是在reactJS中构建一个Notes应用程序。我在componentDidMount中为一个组件编写了一个函数来执行自动调整大小，但是每当我从App.js文件中渲染组件的新实例时，自动调整大小就不再起作用。

这是组件的一部分，但是这里需要关注的是'componentDidMount'。在这里，我编写了一个函数，以确保组件中的特定文本区域会自动调整大小。

import React from 'react'

class Note extends React.Component{
    constructor() {
        super()
        this.state = {}

    }


    componentDidMount() {
        var text = document.querySelector('.textInput');
        text.addEventListener('input', onInput, false);

        function onInput(e) {
            this.style.height = 'auto'
            this.style.height = (this.scrollHeight) + 'px'
        }
    }

这是App.js文件中的render方法。 map函数之前的Note组件在DOM中会自动调整大小，但是每当map函数执行并呈现一个新的Note组件时，自动调整大小就不再起作用。

 render(){
    return (
      <div className="App">

        <div className = 'header'>
          <h2>ReactJS Notes App</h2>
          <button><i className="fas fa-plus-circle" onClick = {this.handleClick}></i></button>
        </div>

        <Note />

        {this.state.notesArr.map((x, key) => (<Note />))}
      </div>
    );
  }

我希望每当从地图上渲染Note组件时，自动调整大小总能正常工作。

Answer 1

您应该使用refs来访问真正的DOM元素属性-阅读docs

您不需要这些类型的事件处理-阅读docs

事件处理程序通常使用setState()强制组件重新呈现（render()调用）。

搜索一些React TODO项目/指南，以免重新发明轮子并学习React模式。

每次重新渲染组件时都可以在组件上使用哪种生命周期方法

1 个答案: