时间戳

首页 > 解决方案 > 在单击时呈现选择标签 - REACT JS

javascript - 在单击时呈现选择标签 - REACT JS

问题描述

每当单击 div/文本时，我都会尝试呈现选择标签。

我不确定在哪里以及如何准确地渲染它。

所以我创建了一个句柄函数，它将变量 isItClick 设置为 true 以呈现 select 语句：

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

}

知道如何在单击 TEXT 后将文本呈现/更改为选择标签，然后在选择项目后将其放回原处吗？在这里对不起新手。谢谢！

标签： javascriptreactjsjsx

解决方案

向组件添加状态并进行条件渲染。这将使用renderTextifshowSelected未设置，并使用renderSelectedif 它已设置。

条件渲染的语法如下：{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});
    }

推荐阅读