每当单击 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>
);
}
知道如何在单击文本后将文本渲染/更改为选择标签,然后在选择项目后将其放回去吗?抱歉这里是新手。谢谢!
最佳答案
向组件添加状态并执行条件渲染。如果未设置 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});
}
关于javascript - 在 Click 上渲染选择标签 - REACT JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50195142/