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

Question

我是 React 初学者。

我有一个具有多个输入字段的父组件（InputField 子组件）。 OnFocus 我想从父组件

中的方法将 Inputfield（InputFieldToolTip 组件）的子组件切换为 show/hide

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

如何在 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 属性对于所有输入和工具提示组件都是相同的。

我假设您想要的行为是在您聚焦输入时显示相应的工具提示。

你可以这样做，而不是在你的 parent 组件中有那个状态，把它放在每个 input/tooltip :

Parent

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 组件控制自己的工具提示组件。他们可以接收工具提示的文本作为道具并将其传递给工具提示。当您将焦点放在 InputField 上时，它会告诉要显示的工具提示，当失去焦点时 onBlur 将触发再次隐藏它。

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

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

Toggle show hide class on child component from parent onfocus method in React

reactjs

react-props

react-state-management