"onFocus" 属性在两个文本字段之间未正确更改

Question

当我从 textfield1 按下“Enter”时，我需要将光标从 textfield1 移动到 textfield2，当我从 textfield2 按下“Enter”时，我需要将光标从 textfield2 移动到 textfield1。
当我在 textfield2 和 textField2 中按“Enter”时，状态会正确改变，但光标不会在文本字段之间移动。

这是我的代码。

export default class BasicTextFields extends React.Component {
  constructor(props) {
    super(props);
    this.one = this.one.bind(this);
    this.two = this.two.bind(this);

    this.state = {
      one: true,
      two: false,
    };
  }

  one(e) {
    console.log(e.key);
    if (e.key == 'Enter') {
      this.setState(
        {
          two: true,
          one: false,
        },
        () => {
          console.log(this.state);
        }
      );
    }
  }

  two(e) {
    if (e.key == 'Enter') {
      this.setState(
        {
          two: false,
          one: true,
        },
        () => {
          console.log(this.state);
        }
      );
    }
  }

  render() {
    return (
      <Box>
        <TextField
          onKeyDown={this.one}
          autoFocus={this.state.one}
          id='filled-basic'
          label='Filled'
          variant='filled'
        />

        <TextField
          onKeyDown={this.two}
          autoFocus={this.state.two}
          id='standard-basic'
          label='Standard'
          variant='standard'
        />
      </Box>
    );
  }
}

Answer 1

对于DOM操作，至于管理输入元素的焦点，可以使用React Refs。

使用 React Refs——假设你的 refs 分别被调用 inputOne 和 inputTwo——你将能够调用 this.inputTwo.current.focus()将焦点放在第二个输入上。有关信息，Ref returns HTML DOM 节点的属性 current。

还有一件事要记住，因为你的 <input> 标签在 children 组件中，但你需要从两个输入的 parent 控制焦点，你'必须在 parent 中声明引用，并转发引用感谢 React.forwardRef。另见 Forwarding Refs。

这里是demo

"onFocus" 属性在两个文本字段之间未正确更改

"onFocus" prop is not changing properly between two text fields

onfocus

reactjs