“焦点”道具在数组中的文本字段之间没有正确更改[重复]

Posted 2023-02-21

【中文标题】“焦点”道具在数组中的文本字段之间没有正确更改[重复]

【英文标题】："Focus" prop is not changing properly between text fields in a array [duplicate]

【发布时间】：2021-12-13 21:11:42

【问题描述】：

按下“Enter”按钮时，我需要在文本字段数组中向下移动光标。当我按“Enter”时，状态会正确更改，但光标不会移动。

这是我的代码

import TextField from "@mui/material/TextField";

export default class BasicTextFields extends React.Component 
  constructor(props) 
    super(props);

    this.state = 
      cursor_index: 0,
      arr: ["sampledata", "sampledata", "sampledata"]
    ;
    this.one = this.one.bind(this);
  

  componentDidMount() 
   
  

  one(e, index) 
    if (e.key === "Enter") 
      this.setState(
        cursor_index: index + 1
      );
    
  

  render() 
    return (
      <div>
        this.state.arr.map((item, index) => 
          return (
            <TextField
              autoFocus=index == this.state.cursor_index
              onKeyDown=(e) => 
                this.one(e, index);
              
              id="filled-basic"
              label="Filled"
              variant="filled"
            />
          );
        )
      </div>
    );
  

【问题讨论】：

这能回答你的问题吗？ "onFocus" prop is not changing properly between two text fields

请不要创建多个帐户来重新发布或编辑您的帖子

【参考方案1】：

您可以将refs array 与您的数据数组并行保存，并使用该信息专注于next text input。

在最后一个输入字段按enter 将再次返回到第一个输入。您可以根据需要更改这些边缘条件。

试试下面

import TextField from "@mui/material/TextField";
import React,  createRef  from "react";

export default class App extends React.Component 
  constructor(props) 
    super(props);

    this.state = 
      cursor_index: 0,
      arr: ["sampledata", "sampledata", "sampledata"],
      refs: [createRef(), createRef(), createRef()]
    ;
    this.one = this.one.bind(this);
  

  componentDidMount() 

  one(e, index) 
    if (e.key === "Enter") 
      const  arr, refs  = this.state;
      console.log();
      refs[(index + 1) % arr.length].current.focus();
    
  

  render() 
    return (
      <div>
        this.state.arr.map((item, index) => 
          return (
            <TextField
              onKeyDown=(e) => 
                this.one(e, index);
              
              inputRef=this.state.refs[index]
              id="filled-basic"
              label="Filled"
              variant="filled"
            />
          );
        )
      </div>
    );
  

代码沙箱 => https://codesandbox.io/s/small-waterfall-uh7p4?file=/src/App.js

【讨论】：

太好了，非常感谢，但数组不是静态的。那么我该如何实现“createRef（）”？

你可以这样构造它。为 InputFiled（它将是 TextField 或 SelectionInput ....等）和 Form 创建一个新组件。表单将获取一组信息作为输入字段，并根据表单中输入的数量创建 refs 数组。