我有以下组件正在创建一个下拉列表。我需要将下拉值的某些文字设为粗体。我需要在下拉列表中将$ {dataIdText}文本设置为粗体。
我的代码段
<Modal.Body className="container-fluid">
<div className='row'>
<label className='col-sm-4' htmlFor='portalSelector'>Exiting item: </label>
<select className='col-sm-8' id='portalSelector' onChange={this.onSelectionChange} value={this.state.selectedItem}>
<option key='-1' label='--Make a selection--' value='-1' />
{((dataId === '') ? stateVar : stateVar.filter((val)=> (val.dataId +"") === dataId )).map((p, index) => {
const status = p.status === 'PENDING' ? '' : p.status === 'SENT'?'':'Unscheduled'
const dataIdDef = datasets.filter((val)=> val.dataId === p.dataId )[0]
const dataIdText = p.dataId === -1? '' : `${dataIdDef.dataIdname} - `
const scheduleDtText = p.scheduleDt === 5711817600000 ? '' : 'scheduled for ' + moment(p.scheduleDt).format('DD/MM/YYYY HH:mm')
return (<option
className='data'
key={index}
value={index}
label={`${status} ${dataIdText} ${p.title} ${scheduleDtText}`}>
</option>)
}
)}
</select>
</div>
</Modal.Body>
我尝试将标签传递给功能组件而不是字符串,但是它不起作用
label={() => (
<span><strong>{status} {datasetIdText}</strong> {p.title} {scheduleDtText}</span>
)}
还尝试将标签放在选项标签本身中,但也无法正常工作,并显示以下错误“仅将字符串和数字作为子级支持
<option
className='data'
key={index}
value={index}
>
<strong>{status} {dataIdText}</strong> {p.title} {scheduleDtText}
</option>
最佳答案
恐怕您不能在选项标签中添加标记。
相反,您可以像这样创建一个下拉列表组件。
//DropdwonList.js
import React, { Component } from 'react';
import './style.css';
class DropdwonList extends Component {
state = {
isActive: false,
activeLabel: ''
}
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
/**
* Set the wrapper ref
*/
setWrapperRef = (node) => {
this.wrapperRef = node;
}
toggleList = () => {
this.setState((state) => ({...state, isActive: !state.isActive}))
}
close = () => {
this.setState((state) => ({...state, isActive: false}))
}
handleClickOutside = (event) => {
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
this.close()
}
}
select = (item) => {
const { onChange } = this.props;
this.setState((state) => ({
...state,
activeLabel: item.label
}))
onChange(item)
this.close()
}
render() {
const { list } = this.props;
const { isActive, activeLabel } = this.state;
return (
<div className='dropdown-list' ref={this.setWrapperRef}>
<span dangerouslySetInnerHTML={{__html: activeLabel ? activeLabel: list[0].label}} onClick={this.toggleList} />
{/* you can replace dangerouslySetInnerHTML with: https://www.npmjs.com/package/react-html-parser */}
<ul className={isActive ? 'active' : ''}>
{list.map((item) => {
return <li dangerouslySetInnerHTML={{__html: item.label}} onClick={() => this.select(item)} />
})}
</ul>
</div>
)
}
}
export default DropdwonList
//style.css
.dropdown-list {
display: inline-block;
position: relative;
}
.dropdown-list span {
border: 1px solid #cccccc;
border-radius: 3px;
padding: 5px;
display: block;
}
.dropdown-list ul {
padding: 5px;
margin: 0;
list-style-type: none;
display: none;
border: 1px solid #cccccc;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top: 0;
margin-top: -1px;
position: absolute;
width: 100%;
text-align: left;
}
.dropdown-list ul.active {
display: block;
}
//您的组件
import React, {Component} from 'react';
import DropdwonList from './DropdwonList';
class Test extends Component {
handleDropDown = (data) => {
console.log('data', data) // { label: '...', value: '...'}
}
render () {
return (
<div>
<DropdwonList
list={[{label: '<strong>bold text</strong> noraml text', value: 'any value you want'}]}
onChange={this.handleDropDown}
/>
</div>
);
}
}
export default App;
或者,您可以使用任何可以满足您需求的开源组件。