从 React 中的父 onfocus 方法切换子组件上的显示隐藏类

Question

我是 React 初学者。

我有一个包含多个输入字段的父组件（InputField 子组件）。 OnFocus 我想切换 Inputfield（InputFieldToolTip 组件）的子项以显示/隐藏父组件中的方法

目前，当我设置 showHide 的状态并通过 props 传递到 Input 字段组件时，它会切换所有工具提示组件

如何在 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>
}

Answer 1

您的问题是当前您的状态由所有组件共享。 showHide 属性对于所有输入和工具提示组件都是相同的。

我假设您的行为是在您关注输入时显示相应的工具提示。

你可以这样做，而不是在你的父组件中拥有那个状态，把它放在每个输入/工具提示中：

父母

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会触发再次隐藏它。

请注意，我还将InputField 中的Input 更改为input，因为您似乎没有使用自定义Input 组件。