如何以编程方式集中投入

Question

我正在尝试实现一个非常简单的用例,一个UI功能,其中:

1. 有一个标签,里面有一些内容
2. 如果单击,则文本输入会将其替换为可用标签的内容
3. 用户可以编辑内容
4. 按下Enter键后,输入隐藏和标签将返回更新的内容

我终于可以得到所有正确的(事实上有一个MongoBD后端,redux等),而且我唯一不能做的事情(在谷歌上搜索完整的一天并阅读SOF类似帖子)是这样的:

当我的文字输入出现时,我无法将焦点转移到它!首先我累了这样:

<div className={((this.state.toggleWordEdit) ? '' : 'hidden')}>
<input id={this.props.word._id} className="form-control"
        ref="updateTheWord" 
        defaultValue={this.state.word}
        onChange={this.handleChange}
        onKeyPress={this.handleSubmit}
        autoFocus={this.state.toggleWordEdit}/></div>
    <div className={((this.state.toggleWordEdit) ? 'hidden' : '')}>
      <h3 onClick={this.updateWord}>
        {this.state.word}</h3>
    </div>

但是autoFocus肯定不起作用(我"猜"因为表单被渲染,但是处于隐藏状态,使得autoFocus无用).

接下来我尝试了我的this.updateWor,我在google和SOF上找到了很多建议:

this.refs.updateTheWord.focus();

这些以及类似的建议都没有奏效.我也试图欺骗React只是为了看看我能做些什么!我使用真正的DOM:

    const x = document.getElementById(this.props.word._id);
    x.focus();

它也没用.我甚至无法理解的一件事是这样的建议: 将ref作为一种方法(我"猜测") 我甚至没有尝试过,因为我有这些组件的倍数,我需要ref进一步获得价值对于每个组件,我无法想象如果我的引用没有命名,我怎么能得到它的价值!

那么请你提出一个想法,帮助我理解,如果我没有使用Form(因为我需要一个输入框替换标签),当我的CSS(Bootstrap)类正在丢失时,如何设置它的焦点？隐藏'拜托？

Answer 1

您使用refs的方式不是最优选的方式,否则它不再是最佳实践.尝试这样的事情

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    this.textInput.current.focus();
  }

  render() {

    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

从React 16.3向上更新,您可以使用React.createRef()API

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focus = this.focus.bind(this);
  }

  focus() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

Answer 2

只需将自动对焦属性添加到中即可input。（当然JSX是autoFocus）

<input autoFocus ...

Answer 3

使用焦点挂钩

// General Focus Hook
const useFocus = (initialFocus = false, id = "") => {
    const [focus, setFocus] = useState(initialFocus)
    const setFocusWithTrueDefault = (param) => setFocus(isBoolean(param)? param : true)
    return ([
        setFocusWithTrueDefault, {
            autoFocus: focus,
            key: `${id}${focus}`,
            onFocus: () => setFocus(true),
            onBlur: () => setFocus(false),
        },
    ])
}


const FocusDemo = () => {

    const [labelStr, setLabelStr] = useState("Your initial Value")
    const [setFocus, focusProps] = useFocus(true)

    return (
        <> {/* React.Fragment */}
            <input
                onChange={(e)=> setLabelStr(e.target.value)}
                value={labelStr}
                {...focusProps}
            />
            <h3 onClick={setFocus}>{labelStr}</h3>
        </>
    )
    
}

如需更完整的演示，请单击此处。