我在父组件中有一个按钮。我想通过单击该按钮来集中位于子组件中的输入字段。我该怎么做。
最佳答案
您可以使用refs
获得结果
class Parent extends React.Component {
handleClick = () => {
this.refs.child.refs.myInput.focus();
}
render() {
return (
<div>
<Child ref="child"/>
<button onClick={this.handleClick.bind(this)}>focus</button>
</div>
)
}
}
class Child extends React.Component {
render() {
return (
<input type="text" ref="myInput"/>
)
}
}
ReactDOM.render(<Parent/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
更新:
React Docs建议使用
ref callback
而不是string refs
class Parent extends React.Component {
handleClick = () => {
this.child.myInput.focus();
}
render() {
return (
<div>
<Child ref={(ch) => this.child = ch}/>
<button onClick={this.handleClick.bind(this)}>focus</button>
</div>
)
}
}
class Child extends React.Component {
render() {
return (
<input type="text" ref={(ip)=> this.myInput= ip}/>
)
}
}
ReactDOM.render(<Parent/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
关于reactjs - 如何聚焦位于子组件中的输入字段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42017401/