Question

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

我尝试过refs，但我无法做到：

<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的值不是函数，因此在组件实例化时，将在尚未定义的引用上调用focus。您可以通过包装调用来解决此问题：() => this.textInput.focus()（或为其创建方法/实例属性。）

其次，material-ui将Input组件包装在withStyles高阶组件中，当您使用ref时，它引用包裹的组件，而不是＆＃ 39; t有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>
..

Answer 2

问题可能出在上下文以及FormControl元素中处理click事件的方式。

请改为尝试：

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

Answer 3

作为注释，请记住，如果您正在使用某种动画，则可能是在安装主要组件时尚未创建输入。在这种情况下，setTimeout的计时器要比动画时间长。

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

3 个答案: