Question

我是个反应型菜鸟，需要一点帮助。

我有一个具有多个输入字段的Parent组件（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>
    )       

  }
}

InputField组件

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

  }
}

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

工具提示

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

现在，每个InputField组件都控制自己的工具提示组件。他们可以接收工具提示的文本作为道具，并将其传递给工具提示。当您将焦点放在InputField时，它将告诉工具提示显示，而当焦点丢失时，onBlur将触发再次将其隐藏。

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

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

1 个答案: