如何将焦点设置为materialUI TextField？

3 回答

• -1

  我偶然发现了这些问题，寻找同样问题的解决方案 . 我发现了 autoFocus 但发现它只在页面首次加载时有效，而不是在表单提交后 . 我最终找到它的方法是将 ref 添加到子 TextField 并在表单上调用 select() 提交：

  <form onSubmit={this.onSubmit}>
              <TextField ref="amountComp" ... />
  </form>
  

  和

  onSubmit(event: any): void {
      // save form
      (this.refs["amountComp"] as TextField).select();
  };
  

  回复于 2024-05-02T11:19:17+08:00
• 5

  autoFocus 也不适合我，也许因为这是一个在顶级组件加载时没有安装的组件 . 为了让它发挥作用，我不得不做更多令人费解的事情：

  const focusUsernameInputField = input => {
    if (input) {
      setTimeout(() => {input.focus()}, 100);
    }
  };
  
  return (
    <TextField
      hintText="Username"
      floatingLabelText="Username"
      ref={focusUsernameInputField}
    />
  );
  

  请注意，由于某种原因，如果没有 setTimeout ，它将无法工作 . 有关详细信息，请参阅https://github.com/callemall/material-ui/issues/1594 .

  回复于 2024-05-02T11:19:17+08:00
• 11

  您可以使用 autoFocus 属性 .

  <TextField value="some value" autoFocus />
  

  回复于 2024-05-02T11:19:17+08:00