React - 使用名称关注输入

Question

我有一个带输入的组件，有什么方法可以使用名称来聚焦吗？

<div onClick={this.handleClick.bind(this)}>
    ... Some more code ...
        <input type="text" name={this.props.name} onChange={this.props.onChange} autoFocus/>
    ... Some more code ...
</div>

单击父级 div 时，我附加了一个单击事件。

handleClick(e) {
    // Need to focus may be using refs, but not sure how to do it.
    return this.props.onClick(this.props.name);
}

Answer 1

组件：

<div onClick={this.handleClick.bind(this)}>
    ... Some more code ...
        <input type="text" ref={(input) => { this.input = input; }} name={this.props.name} onChange={this.props.onChange} autoFocus/>
    ... Some more code ...
</div>

点击处理程序：

handleClick(e) {
    this.input.focus();
    return this.props.onClick(this.props.name);
}

或

组件：

<div onClick={this.handleClick.bind(this)}>
    ... Some more code ...
        <input type="text" ref={this.props.name} name={this.props.name} onChange={this.props.onChange} autoFocus/>
    ... Some more code ...
</div>

点击处理程序：

handleClick(e) {
    this.refs[this.props.name].focus();
    return this.props.onClick(this.props.name);
}

React - 使用名称关注输入

React - Focus on input using name

javascript

input

reactjs

react-redux

或