相关疑难解决方法(0)

我有一个React组件,我想在单击时切换一个css类.

所以我有这个:

export class myComponent extends React.Component {
  constructor() {
    super();
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    return (
      <div>
        <div onClick={this.clicked}><span ref="btn" className="glyphicon">&nbsp;</span></div>
      </div>
    );
  }

  handleClick() {
    this.refs.btn.classList.toggle('active');
  }

  componentDidMount() {
    this.refs.btn.addEventListener('click', this.handleClick);
    this.setState({
      clicked: this.state.clicked = true,
    });
  }

  componentWillUnmount() {
    this.refs.btn.removeEventListener('click', this.handleClick);
    this.setState({
      clicked: this.state.clicked = false,
    });
  }
}

这个问题是ESLint不断告诉我"this.refs"已经折旧了.

我该怎么做？如何修复它以便不使用折旧代码？

假设我有一个组件“Post”，它包含多个组件“Comment”。当我输入如下 URL 时，我想让该应用程序在带有该锚点的评论上向下滚动：

/post/:postId/#commentId

我已经在工作 postId 路线/post/:postId

我尝试使用react-hash-link npm 包来实现它，但它没有按预期工作。

每个评论都有自己的 ID，该 ID 在组件上设置，如下所示：

<div class="post">
   <div class="post-header">
      <div class="post-header-avatar">
        SOME TEXT
      </div>
      <div class="post-header-info">
        SOME TEXT
      </div>
   </div>
   <div class="post-content">
      <span>POST CONTENT</span>
   </div>
   <div class="post-likers-container">
      <div class="post-likers-header label">People who like this post</div>
      <div class="post-likers">
          SOME TEXT
      </div>
   </div>
   <div class="post-comments">
      <div class="comments ">
         <div class="comments-all label">Comments</div>
         <div class="comments">
            <div class="comment" id="5d27759edd51be1858f6b6f2">
               <div class="comment-content">
               COMMENT 1 TEXT
               </div>
            </div>
            <div class="comment" id="5d2775b2dd51be1858f6b720">
               <div class="comment-content">
               COMMENT 2 TEXT
               </div>
            </div> …

我正在使用 TypeScript 构建 React 应用程序。

我想创建按钮，滚动到主页上子组件的标题。

我已经在子组件中创建了一个引用，遵循此堆栈溢出答案，并（尝试）使用前向引用在我的父组件上访问它。

export class Parent extends Component {
  private testTitleRef!: RefObject<HTMLHeadingElement>;

  scrollToTestTitleRef = () => {
    if (this.testTitleRef.current !== null) {
      window.scrollTo({
        behavior: "smooth",
        top: this.testTitleRef.current.offsetTop
      });
    }
  };

  render() {
    return <Child ref={this.testTitleRef} />
  }
}

interface Props {
  ref: RefObject<HTMLHeadingElement>;
}

export class Child extends Component<Props> {
  render() {
    return <h1 ref={this.props.ref}>Header<h1 />
  }
}

不幸的是，当我触发时，scrollToTestTitleRef我收到错误：

Cannot read property 'current' of undefined

这意味着 ref 未定义。这是为什么？我究竟做错了什么？

编辑： Estus …

我想再次问这个问题，但现在问我如何使用函数/钩子来实现这一点。

我尝试使用 useRef 然后访问偏移表单 current.offsetTop，但是在安装组件后我很难访问这个 ref。

function ScrollComponent(props) {
  const foo = false; //loading method
  let resultsRef = useRef();

  useEffect(() => {
    window.scrollTo({
      behavior: "smooth",
      top: resultsRef.current.offsetTop
    });
  }, [resultsRef]);

  if (foo)
    return (
      <div>
        <h4>Loading...</h4>
      </div>
    );
  return (
    <div ref={resultsRef}>
      <h4>content</h4>
    </div>
  );
}

在上面的示例中，我有一个名为 foo 的常量，它不需要附加此滚动引用，因为它会在加载内容时显示。

但是，在运行此代码时，我得到了无法读取未定义的属性 'offsetTop'

在我的 useEffect 方法中，我将依赖项指定为 resultsRef，因此我希望它仅在内容 div 加载时写入 resultsRef 时才被调用，但是，情况并非如此。

我正在使用 Material UI 和打字稿进行反应，并有一个表单。在表单提交时，如果输入有验证错误，我想滚动到第一个有验证错误的输入。我在下面粘贴了简单的表单代码，该代码在提交时在城镇输入中注入验证错误。实际上，错误可能存在于任何一个或多个输入中。

import React, { useState, FormEvent } from 'react';
import { Grid, TextField, Button } from '@material-ui/core';

const ScrollTest = () => {
  const [state, setState] = useState<{ town: string; county: string }>({
    town: '',
    county: '',
  });

  const [error, setError] = useState({ town: '', county: '' });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    const errorVal = !value ? `${name} is requied` : '';
    setState({ ...state, [name]: …

如何滚动到其他组件中的列表元素？

class Posts extends Components {
  render() {
    <ul>
     {this.props.posts.map((post) => 
        <li key={post.id}>{post.title}</li>
     )} 
    </ul>
  }

   //redux
}

class OtherComponent extends Components {
  onClickHandler = (id) => {
     //!!!!!!!!
     //scroll page to li with key={post.id}
  }

  render() {
    <div>
     {this.props.posts.map((post) => 
        <div key={post.id} onClick={() => this.onClickHandler(post.id)}>{post.title}</div>
     )} 
    </div>
  }

   //redux
}

我在这里找到了解决方案：ReactJS how to scroll to an element

但都是针对单个元素的。

如果我有列表，我需要为每个人创建一个引用吗？帖子列表可以更改，所以我不能这样做。

大家好，我是 ReactJS 的新人。

我想滚动特定的 div 而不是窗口

          const handleScroll = (event) => {
      window.scrollBy(100, 0);
      }