Рендеринг выбранного тега по клику - REACT JS

Question

Я пытаюсь отобразить выбранный тег при каждом нажатии div / text.

Я не уверен, где и как именно это сделать.

Итак, я создал функцию дескриптора, которая установит для переменной isItClick значение true, чтобы отобразить оператор выбора:

   _handleClickSelect(){
    isItClick = true;
    console.log('here is the select tag')
  }

А затем передал его вместе с моим компонентом:

 <ItemList _handleClick={this.props._handleClick} />

тогда на моем div я попытался выполнить его, но это, конечно, не сработало:

render() {
const selectList(){
  var isItClick = false;

  if(isItClick === true){
    <div className="sss-data" onClick={this.props._handleClickSelect}>
       <select>
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
    </select>
    </div>

  } else {
     <div className="ss" onClick={this.props._handleClickSelect}>TEXT</div>
  }
}
return (
  <div className="ss-row"
    {selectList}
  </div>
);

}

Есть идеи, как я могу отобразить / изменить текст на тег выбора после нажатия на ТЕКСТ, а затем вернуть его после выбора элемента? Извините новичка здесь. Спасибо!

Answer 1

Добавить состояние к компоненту и выполнить условный рендеринг. Это будет использовать renderText, если showSelected не установлено, и использовать renderSelected, если оно установлено.

Синтаксис для условного рендеринга следующий: {this.state.showSelected ? this.renderSelected() : this.renderText()}, который можно записать как:

if (this.state.showSelect) {
  return this.renderSelected();
} else {
  return this.renderText();
}

Или еще более компактный, включая весь код:

    constructor() {
      this.state = { showSelected: false }
    }

    render() {
      return {this.state.showSelected ? this.renderSelected() : this.renderText()}
    }
    renderText = () => {
      return <div className="ss" onClick={this.handleTextClick}>TEXT</div>;
    }

    renderSelected = () => {
      return <div className="sss-data">
           <select>
              <option value="1">Item 1</option>
              <option value="2">Item 2</option>
              <option value="3">Item 3</option>
          </selected>
        </div>;
    }
    
    handleTextClick = () => {
      this.setState({showSelected: true});
    }

Answer 2

В этом случае вы можете использовать один компонент с отслеживанием состояния и один компонент без сохранения состояния или один компонент с сохранением состояния. Когда состояние изменилось, не setState напрямую true оно противоположно текущему состоянию isItClick : !this.state.isItClick, вы можете попробовать это ..
с состоянием SelectComponent

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

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

_handleClickSelect = (value) => {
  this.setState(() => ({
    isItClick : !this.state.isItClick
  }));
  if(typeof value !== 'object'){
    console.log(value);
  }
}
render() {
   return (
      <div>
        {this.state.isItClick
          ? <ItemList _handleClick={this._handleClickSelect}/>
          : <div className="ss" onClick={this._handleClickSelect}>TEXT</div>
        }

      </div>
    )
  }
}
export default SelectComponent;

А без состояния ItemList Компонент

import React, {Component} from 'react';
const ItemList = (props) => {
return (
  <div className="sss-data">
    <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;

Answer 3

Почему бы вам не использовать состояния конструктора вместо создания переменной?

Документ от ReactJS

Вот пример

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: false};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        {this.state.show ? 
            <div className="sss-data" onClick={this.props._handleClickSelect}>
              <select>
                <option value="1">Item 1</option>
                <option value="2">Item 2</option>
                <option value="3">Item 3</option>
              </select>
           </div>
     : <button onClick={()=> this.setState({ show: true })}>Show</button>}
      </div>
    );
  }
}