Question

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

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

我尝试将组件（InputText）移到呈现函数（PollTable）之外，并将处理程序函数作为道具传递给输入，以便它可以更新状态，该状态驻留在呈现函数内部。这是我在其他帖子上阅读的建议，但这似乎也不起作用。

如果查看浏览器示例，然后在名为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: {
        pollName: ``,
        author: ``,
        affiliates: [],
        status: ``
      }
    }
  }

  function dataReducer(state, action) {
    const stateFilters = state.filteredBy;
    let dataResult = state.data;
    let column = (action.sortBy && action.sortBy.column) || state.sortBy.column;
    let asc;
    if (action.sortBy) {
      asc = state.sortBy.column === action.sortBy.column ? !state.sortBy.asc : true;
    } else {
      asc = state.sortBy.asc;
    }
    // Filter through results
    if (action.filterBy) {
      stateFilters[action.filterBy.column] = action.filterBy.value;
      dataResult = filter(dataResult, stateFilters);
    }
    // Pass results into state
    return {
      data: sorting(dataResult, column, asc),
      sortBy: {
        column: column,
        asc: asc
      },
      filteredBy: stateFilters
    }
  }

  function handleOnChange(e) {
    setTableData({
      filterBy: {
        column: e.target.name.replace(`filter-`, ``),
        value: e.target.value
      }
    })
  }

  function FilterInputsRow(props) {
    if (props.type === `text`) {
      return(
        <InputText
          name={props.name}
          label={props.label}
          filterByColumn={props.filterByColumn}
          value={props.value}
          handleOnChange={props.handleOnChange}
        />
      )
    }
  }

  function FilterInputs() {
    // Changes the class on the main filter dropdown div to open/close the dropdown
    const setClassName = !openFilters ? `polls-filter__inputs` : `polls-filter__inputs polls-filter__inputs--show`;
    return(
      <form className={setClassName} key="filter-form">
        <FilterInputsRow
          type="text"
          name="filter-pollName"
          label="Poll Name"
          filterByColumn="pollName"
          value={tableData.filteredBy.pollName}
          handleOnChange={handleOnChange}
        />
      </form>
    )
  }

  return(
    <div className="polls-filter">
      <Filter />
      <FilterInputs />
    </div>
  )
}

export default PollTable;

我希望输入保持焦点，以便用户在字段中键入内容时，它会将结果过滤到表中（此处未显示）。

Answer 1

您遇到的主要问题是在另一个组件中定义组件。您的组件在PollTable组件的每个渲染上都会重新定义。将函数定义移出PollTable组件，一切正常。

我在这里编辑了您的代码：https://codesandbox.io/s/14427lzmo7

请注意，如果在组件内部定义某些功能，则可能会导致错误并降低应用程序的性能。

当我输入字母时，React文本输入失去焦点

1 个答案: