Question

我正在尝试在单击div /文本时呈现select标记。

我不确定在何处以及如何准确呈现它。

所以我创建了一个句柄函数，它将一个变量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后将文本渲染/更改为选择标记，然后在选择项目后将其放回？对不起新手在这里。谢谢！

Answer 1

为什么不使用构造函数状态而不是创建变量？

来自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>
    );
  }
}

Answer 2

向组件添加状态并执行条件渲染。如果未设置renderText，则会使用showSelected，如果已设置，则使用renderSelected。

条件渲染的语法如下：{this.state.showSelected ? this.renderSelected() : this.renderText()}，可以写成：

＆＃13;

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

＆＃13;

或者包括整个代码更紧凑：

＆＃13;

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

＆＃13;

Answer 3

在这种情况下，您可以使用一个有状态组件和一个无状态组件或一个有状态组件。当状态发生变化时，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;

在Click - REACT JS上渲染选择标记

3 个答案: