javascript - 在 Click 上渲染选择标签 - REACT JS

Question

每当单击 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>
);

}

知道如何在单击文本后将文本渲染/更改为选择标签，然后在选择项目后将其放回去吗？抱歉这里是新手。谢谢!

Answer 1

向组件添加状态并执行条件渲染。如果未设置 showSelected，则将使用 renderText；如果已设置，则使用 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});
    }