小编Bar*_*bal的帖子

我有一个文本输入字段，它是一个受控的 React 组件。当我在字段中输入一个字母时，输入失去焦点并且光标消失。有问题的文件是 /src/modules/PollName.js。

https://codesandbox.io/embed/wkl1kkp0pk?fontsize=14

我尝试将组件 (InputText) 移到渲染函数 (PollTable) 之外，并将处理函数作为 prop 传递给输入，以便它可以更新位于渲染函数内部的状态。这是我在其他帖子上阅读的建议，但这似乎也不起作用。

如果您查看浏览器示例，并在名为 Poll Name 的表单输入内部单击并键入一个字母，您将看到在键入后光标消失。

import React, { useState, useReducer } from 'react';
import { pollTable, sorting, filter } from './../helpers/Fetch';

function InputText(props) {
  return(
    <div className="polls-filter__inputs-row">
      <label className="polls-filter__input-label" htmlFor={props.name}>{props.label}</label>
      <input
        type="text"
        id={props.name}
        name={props.name}
        value={props.value}
        onChange={props.handleOnChange}
      />
    </div>
  )
}

function PollTable() {
  const [tableData, setTableData] = useReducer(
    dataReducer,
    pollTable,
    dataInit
  );

  function dataInit(pollTable) {
    return {
      data: sorting(pollTable, `pollName`, true),
      sortBy: {
        column: `pollName`,
        asc: true
      },
      filteredBy: …

有没有一种方法可以使用“相交观察器”来检测元素是否离开视口？例如，我在屏幕上有一个元素，当元素的顶部碰到视口的顶部时，我想触发一个回调。从MDN：

Intersection Observer API使代码可以注册一个回调函数，该回调函数将在他们希望监视的元素进入或退出另一个元素（或视口）时，或者当两个相交的量改变请求的量时执行。-（https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API）

因此，如果我做下面的事情，我会以为元素的顶部也到达视口的顶部时会触发回调？

var options = {
    root: document.querySelector('#element'),
    rootMargin: '0px',
    threshold: 0
}

var observer = new IntersectionObserver(callback, options);

但是，只有当元素的顶部滚动并击中视口的底部时，才会触发该事件，但不能同时触发两者。有想法吗？