reactjs - 兄弟组件的 React Ref
问题描述
我有 Component 命名其中Home
containsLeftNav
和Component. 组件有一个输入字段,组件有一个按钮。当组件中的按钮单击时,我需要关注组件中的输入字段。BookSearch
HomeCart
BookSearch
HomeCart
HomeCart
BookSearch
我进行了一些研究,我只能集中来自同一个组件的元素。如何使用 React Ref 实现所需的行为?
主页.jsx
class Home extends React.Component {
render() {
return (
<React.Fragment>
<div className="row no-gutters app">
<div className="col-sm-12 col-md-12 col-lg-2">
<LeftNav />
</div>
<div className="col-sm-12 col-md-12 col-lg-7 books-panel">
<BookSearch test={this.test}/>
</div>
<div className="col-sm-12 col-md-12 col-lg-3 cart-panel">
<HomeCart onClick={thi} />
</div>
</div>
</React.Fragment>
);
}
}
图书搜索.jsx
class BookSearch extends React.Component {
render() {
return (
<React.Fragment>
<button onClick={this.test}>Focus</button>
<div className="row text-center">
<div className="col-12">
<form onSubmit={this.handleSubmit}>
<h2 className="mt-5">Start searching your favorite books</h2>
<label htmlFor="search-query" className="sr-only">
Search by book name
</label>
<input
name="search-query"
onChange={this.handleChange}
type="search"
className="book-search"
value={this.state.query}
placeholder="Start searching...."
/>
<button type="submit" className="btn btn-primary btn-lg">
Search
</button>
</form>
</div>
</div>
</React.Fragment>
);
}
}
HomeCart.jsx
class HomeCart extends React.Component {
focusSearchBookInput(){
this.props.focusSearchBookInput()
}
render() {
const { cart_items } = this.props;
const cartTable = ();
const noCartItems = (
<React.Fragment>
<p>No items currently available in your cart. </p>
<button onClick={this.focusSearchBookInput} className="btn btn-success mt-5">
<ion-icon name="search" /> Start Searching
</button>
</React.Fragment>
);
return (
<React.Fragment>
<div className="row text-center">
<div className="col-12">
<h2 className="mt-5 mb-5">Books in your cart</h2>
{cart_items.length > 0 ? cartTable : noCartItems}
</div>
</div>
</React.Fragment>
);
}
}
解决方案
一种解决方案可能是...
创建 ref 和一个单击处理程序,将焦点设置在Home.jsx中的 ref 上
class Home extends React.Component {
inputRef = React.createRef();
focusHandler = () => {
this.inputRef.current.focus();
}
render() {
return (
<React.Fragment>
<div className="row no-gutters app">
<div className="col-sm-12 col-md-12 col-lg-2">
<LeftNav />
</div>
<div className="col-sm-12 col-md-12 col-lg-7 books-panel">
<BookSearch inputRef={this.inputRef} />
</div>
<div className="col-sm-12 col-md-12 col-lg-3 cart-panel">
<HomeCart focusHandler={this.focusHandler} />
</div>
</div>
</React.Fragment>
);
}
}
添加ref={this.props.inputRef}
到BookSearch.jsx中的输入
添加onClick={this.props.focusHandler}
到HomeCart.jsx中的按钮
推荐阅读
- amazon-web-services - 您将如何设置 Lambda,如果将文件上传到您的 S3 存储桶,它将文件复制到 SFTP?
- javascript - While循环增加数字,直到高于或等于目标
- postgresql - PostgreSQL - 表和列的区分大小写的名称是否可行?
- python - 'gensim' 在 pycharm 中无法识别
- c++ - 当父尺寸改变时如何改变子部件的尺寸?
- ms-access - WinSCP跳过文件在操作过程中被删除
- php - 如何在购买的 linux 主机上使用 Xdebug
- java - 在 JSP 中使用 Java HttpSession 变量
- java - 智能 | 错误:无法创建 Java 虚拟机 | 错误:发生了致命异常。程序将会退出
- python - python win32com 批量阅读outlook邮件——打开的项目太多