reactjs - 从 React 中的父 onfocus 方法切换子组件上的显示隐藏类
问题描述
我是 React 初学者。
我有一个具有多个输入字段的父组件(InputField 子组件)。OnFocus 我想切换 Inputfield 的子项(InputFieldToolTip 组件)以显示/隐藏父组件中的方法
目前,当我设置 showHide 的状态并通过道具传递到输入字段组件时,它会切换所有工具提示组件
如何在 React 中引用单个工具提示组件?在 jQuery 中,我只会给它一个 ID 并使用一个 Dom 选择器。
示例代码(请不要将此作为实际代码,它只是代表结构和当前正在传递的内容):
父组件
import React from 'react';
import ReactDOM from 'react-dom';
import InputField from './InputField.jsx';
class Parent extends React.Component {
constructor(props){
super(props);
this.state={
showHide: ' hide',
toolTip: 'This is a tooltip'
}
this.showHide = this.showHide.bind(this);
}
showHide(){
if(this.state.showHide === 'hide') {
this.setState({
showHide: 'show'
))};
} else {
this.setState({
showHide: 'hide'
});
}
}
render(){
return(
<div>
<InputField
name='input-1'
OnFocus={this.showHide}
type="text"
showHide={this.state.showHide}
toolTip={this.state.toolTip}
/>
<InputField
name='input-2'
OnFocus={this.showHide}
type="text"
showHide={this.state.showHide}
toolTip={this.state.toolTip}
/>
<InputField
name='input-3'
OnFocus={this.showHide}
type="text"
showHide={this.state.showHide}
toolTip={this.state.toolTip}
/>
</div>
)
}
}
输入字段组件
import React from 'react';
import ReactDOM from 'react-dom';
import InputField from './ToolTip.jsx';
export class InputField extends React.Component{
render(){
return(
<div>
<Input/>
<ToolTip
showHide={this.props.showHide}
toolTip={this.props.toolTip}
/>
</div>
)
}
}
工具提示组件
import React, {Component} from 'react';
export const ToolTip = (props) => {
return <div className={this.props.showHide}>{this.props.toolTip}</div>
}
解决方案
您的问题是当前您的状态由所有组件共享。showHide 属性对于所有输入和工具提示组件都是相同的。
我假设您要采取的行为是在您关注输入时显示相应的工具提示。
你可以这样做,而不是在你的父组件中拥有那个状态,把它放在每个 input/tooltip 中:
家长
import React from 'react';
import ReactDOM from 'react-dom';
import InputField from './InputField.jsx';
class Parent extends React.Component {
render(){
return(
<div>
<InputField
name='input-1'
type="text"
tooltipText="Input1 Tooltip"
/>
<InputField
name='input-2'
type="text"
tooltipText="Input2 Tooltip"
/>
<InputField
name='input-3'
type="text"
tooltipText="Input3 Tooltip"
/>
</div>
)
}
}
输入字段
import React from 'react';
import ReactDOM from 'react-dom';
import InputField from './ToolTip.jsx';
export class InputField extends React.Component{
constructor(props){
super(props)
this.state = {
tooltipShown: false
}
this.showTooltip = this.showTooltip.bind(this)
this.hideTooltip = this.hideTooltip.bind(this)
}
showTooltip(){
this.setState({
tooltipShown: true
})
}
hideTooltip(){
this.setState({
tooltipShown: false
})
}
render(){
return(
<div>
<input onFocus={this.showTooltip} onBlur={this.hideTooltip} />
<ToolTip
shown={this.state.tooltipShown}
text={this.props.tooltipText}
/>
</div>
)
}
}
工具提示
export const ToolTip = (props) => {
return (
<div className={props.shown ? 'show' : 'hide'}>
{props.tooltipText}
</div>
)
}
现在每个InputField
组件都控制自己的 Tooltip 组件。他们可以接收工具提示的文本作为道具并将其传递给工具提示。当你给一个焦点时InputField
,它会告诉工具提示被显示,当焦点丢失onBlur
时会触发再次隐藏它。
请注意,我还将Input
inInputField
更改为,input
因为您似乎没有使用自定义Input
组件。
推荐阅读
- bash - Pod 没有安装到 Pulsar 命名空间
- java - 比较方法违反了它的一般约定 - Java 错误
- regex - 正则表达式将字符串的所有部分与 `[0-9_]+` 匹配并跳过可选的 `_[a-z0-9]{24}`?
- flutter - 使用 Laravel Echo 从 Flutter 应用程序发送事件
- r - 多个列上的字符串匹配,具有特定字符串和关联名称中的值比较
- python - Python初学者 - 如何从列表中召回已删除的项目
- mysql - 将两个查询合并到一个查询中
- python - 在 DEAP 库中将列表类型转换为单个类型
- reactjs - 实现 react-ssr-adsense 包的问题
- c# - MStest 既找不到类也找不到命名空间