使用React Material-UI自动对焦TextField

3 回答

• 2

  你可以这样做： <TextField autoFocus={true} ></TextField> .

  更多相关信息：https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes .

  回复于 2024-05-14T06:27:37+08:00
• 7

  出于某种原因，这对我不起作用（可能是因为它在一个组件中，当顶级组件安装时不可见） . 为了让它发挥作用，我不得不做一些更复杂的事情：

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

  有关详细信息，请参阅https://github.com/callemall/material-ui/issues/1594 .

  回复于 2024-05-14T06:27:37+08:00
• 0

  我只是简单地将输入的参考放入状态

  <TextInput inputRef={el => { this.setState({form: el}) }}/>

  然后你可以在任何地方将焦点设置到输入 .

  this.state.form.focus()

  回复于 2024-05-14T06:27:37+08:00