Нажмите на кнопку Выбрать тег - Реагировать

Question

Я работаю над приложением реагирования, которое, когда пользователь нажимает на один текст, отображает тег выбора с элементами на нем.

У меня здесь две проблемы:

1. Когда я нажимаю на текст, тег выбора появляется на ВСЕХ элементе списка вместо элемента, на который был клик.

Например, у меня есть список:

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

Когда я нажимаю на текст для джорджа, и джордж, и микаэль будут отображать тег выбора. Что не то, что я хочу сделать. Он должен отображаться только в элементе списка, который был нажат.

2. После выбора элемента из тега выбора он должен сохранить это состояние, и он станет значением по умолчанию для «текста».

Например:

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

Если я нажму на текст Джорджа, а затем появится тег выбора для Джорджа. если я выберу значение: item 1, оно должно сохранить его и сделать его значением по умолчанию для текста, чтобы выходные данные были такими, а затем тег выбора снова исчезнет, ​​а затем, если его щелкнуть, он снова появится, и наоборот:

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

Так что это своего рода переключение на обычный текст и выбор элементов тега.

До сих пор я создал один компонент с состоянием и один компонент без состояния или один компонент с состоянием. Когда состояние изменено, не устанавливайте напрямую trueState, оно противоположно текущему состоянию 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

1. Вы также должны установить идентификатор выделенного элемента в переменной состояния, а в методе рендеринга списка вам нужно будет проверить этот идентификатор и вернуть ItemList только для выбранного элемента. Если вы разместили код для отображения списка, я бы поделился отредактированным кодом.

2. Вам нужно будет сохранить массив состояний, чтобы отслеживать каждый элемент в списке. В onChange для выбора вам нужно будет установить значение состояния, а для рендера компонента App должен быть следующий оператор

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

Я разместил код в https://codesandbox.io/s/7y8k77nrm1.