переключить show hide class на дочерний компонент из родительского метода onfocus React

Question

Я реагирующий новичок и мне нужна небольшая помощь.

У меня есть родительский компонент, имеющий несколько полей ввода (дочерний компонент InputField).OnFocus Я хочу переключить дочерний элемент поля ввода (компонент InputFieldToolTip) для отображения / скрытия от метода в родительском компоненте

в настоящее время, когда я устанавливаю состояние showHide и передаю в компонент поля ввода через подпорки,он переключает все компоненты всплывающей подсказки

Как мне ссылаться на отдельный компонент всплывающей подсказки в React

В jQuery я бы просто присвоил ему идентификатор и использовал селектор 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>
    )       

  }
}

InputField Component

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>
    )           
  }
}

ToolTip Component

import React, {Component} from 'react';
export const ToolTip = (props) => {
  return <div className={this.props.showHide}>{this.props.toolTip}</div>
}

Любая помощь очень ценится, особенно если в ней есть пример

Answer 1

Ваша проблема в том, что в настоящее время ваше состояние совместно используется всеми вашими компонентами.Пропуск showHide одинаков для всех входных данных и компонентов всплывающей подсказки.

Я предполагаю, что поведение, которое вы используете, заключается в отображении соответствующей всплывающей подсказки при фокусировке ввода.

Вы можетесделайте это, вместо того чтобы иметь это состояние в родительском компоненте, поместите его в каждый ввод / всплывающую подсказку:

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>
    )       

  }
}

InputField

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>
    )           
  }
}

Tooltip

export const ToolTip = (props) => {
  return (
     <div className={props.shown ? 'show' : 'hide'}> 
       {props.tooltipText}
     </div>
  )
}

Теперь каждый компонент InputField управляет своим собственным компонентом всплывающей подсказки.Они могут получить текст всплывающей подсказки в качестве реквизита и передать его всплывающей подсказке.Когда вы дадите фокус на InputField, он сообщит, что всплывающая подсказка будет отображаться, а при потере фокуса onBlur сработает, чтобы скрыть его снова.

Обратите внимание, что я также изменил Inputот InputField до input, поскольку не похоже, что вы используете пользовательский компонент Input.