javascript - 在 MUI 输入组件区域外单击时将焦点设置在该组件上

Question

我正在使用 ReactJS 和 Material UI 创建一个应用程序。我在 FormControl 组件内有一个输入组件。当用户单击 FormControl 时(但仍在输入组件之外)，我想将焦点设置在输入组件上。如何实现这一目标？

我尝试过使用引用文献，但无法做到:

<FormControl
    onClick={this.textInput.focus()}
    style={{ display: 'block', cursor: 'text' }}
>
<Input
  error={this.props.error}
  disabled={this.props.disabled}
  ref={(input) => { this.textInput = input; }}
/>
</FormControl>

Answer 1

我对material-ui不太熟悉，但我认为这里有两个问题。首先，您的 onClick 值不是一个函数，因此当组件实例化时，这将在尚 undefined reference 上调用 focus 。您可以通过包装调用来解决此问题:() => this.textInput.focus()(或为其创建一个方法/实例属性。)

其次，material-ui 将 Input 组件包装在 withStyles 高阶组件中，并且当您使用 ref，它指的是包装的组件，它没有 focus 方法。相反，您可以使用 inputRef 属性，它创建对实际 input DOM 元素的引用。 (参见https://material-ui-next.com/customization/api/#internal-components)

这段代码应该可以工作:

..
  <FormControl
    onClick={() => this.textInput.focus()}
    style={{ display: 'block', cursor: 'text' }}
  >
    <Input
      error={this.props.error}
      disabled={this.props.disabled}
      inputRef={(input) => { this.textInput = input; }}
    />
  </FormControl>
..