【问题标题】:How to autofocus an input field in semantic-ui-react?如何在语义-ui-react 中自动聚焦输入字段?
【发布时间】:2018-08-17 02:04:39
【问题描述】:

我很难使用语义 UI 反应自动聚焦输入字段。 documentation 似乎不包含 autoFocus 道具,focus 道具也没有像预期的那样将光标放在输入字段内。

<Form onSubmit={this.handleFormSubmit}>
  <Form.Field>
    <Form.Input
      onChange={e => this.setState({ username: e.target.value })}
      placeholder='Enter your username'
      fluid />
  </Form.Field>
</Form>

编辑:此代码有效:

<Form onSubmit={this.handleFormSubmit}>
  <Form.Input
    onChange={e => this.setState({ username: e.target.value })}
    placeholder="Enter your username"
    autoFocus
    fluid />
</Form>

【问题讨论】:

    标签: semantic-ui-react


    【解决方案1】:

    我会假设语义 UI 会将所有未知道具传递给根元素,即输入。因此,如果是这样,您应该能够为其添加 autoFocus 属性,如果不是,您将必须控制哪个输入在您的状态下被聚焦。

    <Input placeholder='Search...' focus={this.state.focusedElement === "search"}/>
    

    【讨论】:

      【解决方案2】:

      focus 属性纯粹是为输入的外观添加焦点效果,它实际上并没有设置焦点。

      Semantic 未使用的任何 props 都是 passed down to the DOM element,所以如果你设置了一个 autoFocus prop,它应该下到输入。

      但是,正如Form documentation 中所述:

      Form.Input

      &lt;Form.Field control={Input} /&gt; 加糖。

      所以你的代码应该是:

      const yourForm = (
        <Form onSubmit={this.handleFormSubmit}>
          <Form.Input
            onChange={e => this.setState({ username: e.target.value })}
            onSelect={() => this.setState({ usernameErr: false })}
            placeholder="Enter your username"
            error={usernameErr}
            iconPosition="left"
            name="username"
            size="large"
            icon="user"
            fluid
            autoFocus
          />
        </Form>
      )
      

      请注意,这仅在您希望在安装包装器组件时立即发生焦点时才有效。如果你想在输入被挂载后聚焦,你必须使用一个 ref 并在其上调用focus() 方法,就像在documentation 中显示的那样,如下所示:

      class InputExampleRefFocus extends Component {
        handleRef = (c) => {
          this.inputRef = c
        }
      
        focus = () => {
          this.inputRef.focus()
        }
      
        render() {
          return (
            <div>
              <Button content='focus' onClick={this.focus} />
              <Input ref={this.handleRef} placeholder='Search...' />
            </div>
          )
        }
      }
      

      希望有帮助!

      【讨论】:

        【解决方案3】:

        为了告诉输入域焦点,你需要创建一个对输入域的引用(ref),如下所示:

        import React, { useState, useRef } from 'react';
        import { Input, Button } from 'semantic-ui-react';
        
        const SearchInputExample = () => {
          const [searchValue, setSearchValue] = useState('');
        
          // Create reference to the input field
          const searchRef = useRef(null);
        
          const handleSearchValueChange = event => setSearchValue(event.target.value);
        
          return (
            <div>
              <Input
                placeholder="Search..."
                // Assign the ref created to a ref attribute
                ref={searchRef}
                value={searchValue}
                onChange={handleSearchValueChange}
              />
              <Button
                onClick={() => {
                  setSearchValue('');
                  // Use the ref assigned to put the focus inside the input
                  searchRef.current.focus();
                }}
              >
                Clear search (and focus)
              </Button>
            </div>
          );
        };
        
        export default SearchInputExample;
        

        您可以阅读有关 useRef() 钩子 here 的更多信息

        【讨论】:

          猜你喜欢
          • 2022-09-29
          • 1970-01-01
          • 1970-01-01
          • 2022-08-16
          • 2012-09-08
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多