时间戳

首页 > 解决方案 > 切换单击选择标签 - 反应

javascript - 切换单击选择标签 - 反应

问题描述

我正在开发一个反应应用程序，当用户单击单个文本时，它将显示一个带有项目的选择标签。

我在这里出现了两个问题：

  1. 当我单击文本时，选择标记将出现在所有列表项上，而不是单击的项上。

例如我有列表：

--------------------------------
name          item
--------------------------------
George        text
Mikael        text

当我单击 george 的文本时，george 和 mikael 都会显示选择标签。这不是我想做的。它只能显示在被点击的列表项上。

  1. 从选择标签中选择一个项目后，它必须保持该状态，它将成为“文本”的默认值。

例如：

--------------------------------
name          item
--------------------------------
George        text
Mikael        text

如果我单击乔治文本，然后将出现乔治的选择标签。如果我选择值：item 1它必须保留它并使其成为文本的默认值，因此输出将是这样的，然后选择标记将再次消失，然后如果单击它将再次出现，反之亦然：

--------------------------------
name          item
--------------------------------
George        item 1
Mikael        text

所以这有点像切换到常规文本并选择标签项。

到目前为止，我创建了一个有状态组件和一个无状态组件或一个有状态组件。当状态改变时，不要直接设置状态为真，它与当前状态 isItClick 相反：!this.state.isItClick

import React, {Component} from 'react';
import ItemList from './ItemList';

class App extends Component {
  constructor(props) {
  super(props);
  this.state = {
    isItClick: false
  }
  this.clickfn = this.clickfn .bind(this);
}

clickfn = (value) => {
  this.setState(() => ({
    isItClick : !this.state.isItClick
  }));
}
render() {
   return (
      <div>
        {this.state.isItClick
          ? <ItemList clickfn ={this.clickfn }/>
          : <div className="myspace" onClick={this.clickfn }>TEXT</div>
        }

      </div>
    )
  }
}
export default App;

然后对于我的 itemlist 组件：

import React, {Component} from 'react';
const ItemList = (props) => {
return (
  <div className="my-space">
    <select onChange={(e) => props._handleClick(e.target.value)}>
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
    </select>
  </div>
  );
}
export default ItemList;

知道我在这里想念什么吗？我需要解决什么问题才能使其根据我的目标发挥作用？请在这里帮助新手！

PS。将不胜感激演示代码。

标签： javascripthtmlreactjsjsx

解决方案

  1. 您还必须在状态变量中设置单击的项目 ID，并且在列表的渲染方法中，您必须检查此 ID 并仅为单击的项目返回 ItemList。如果您已发布代码以显示列表，我将共享已编辑的代码。

  2. 您必须保留一组状态来跟踪列表中的每个项目。在选择的 onChange 中，您必须设置状态值，并且 App 组件的渲染应该具有以下语句

<div className="myspace" onClick={this.clickfn }>{this.state.variableToTrackSelect}</div>

我已经发布了发布在https://codesandbox.io/s/7y8k77nrm1中的代码。

推荐阅读