Question

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

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

当我点击文字时，选择标记会显示在所有列表项上，而不是点击的项目。

例如我有清单：

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

当我点击乔治的文字时，george和mikael都会显示select标签。这不是我想要做的。它必须仅显示在单击的列表项上。

从select标签中选择一个项目后，它必须保留该状态，并且它将成为“text”的默认值。

例如：

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

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

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

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

到目前为止，我创建了一个有状态组件和一个无状态组件或一个有状态组件。当状态改变时，不直接将setState设为true，它与当前状态相反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。非常感谢演示代码。

Answer 1

您必须在状态变量中设置单击的项目ID，并且在列表的render方法中，您必须检查此ID并仅为所单击的项目返回ItemList。如果您已发布代码以显示列表，我将共享已编辑的代码。
您必须保留一系列状态以跟踪列表中的每个项目。在select的onChange中你必须设置状态值，App组件的渲染应该有以下语句

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

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

切换单击选择标记 - 反应

1 个答案: