英文:
react-select avoid formatting for selected option
问题
我正在我的表单中使用react-select控件。
使用formatOptionLabel方法，我已经自定义了以不同格式显示选项。
<Select
className="basic-single"
classNamePrefix="Select"
isClearable={true}
isSearchable={true}
isMulti
value={this.state.myselectedvalue}
options={this.state.myoptions}
onChange={(value) => this.setState({ myselectedvalue: value })}
isDisabled={this.state.Disabled}
formatOptionLabel={formatResult}
/>
const formatResult = (item: any) => {
let imageurl = 'https://mywebsite/' + item.countrycode + '.gif';
return (
<div>
<div className={styles.Optiontablerow}>
<div className={styles.OptionImageCell}>
<img src={imageurl}></img>
</div>
<div className={styles.Optiontablecell}>{item.label}</div>
</div>
</div>
)
}
现在，当我选择选项时，选定的选项中会显示相同的格式。
对于选定的选项，如何避免此格式？
请帮助。
英文:
I am using react-select control in my form.
Using formatOptionLabel method, i have customized to display options in different format.
<Select
className="basic-single"
classNamePrefix="Select"
isClearable={true}
isSearchable={true}
isMulti
value={this.state.myselectedvalue}
options={this.state.myoptions}
onChange={(value) => this.setState({ myselectedvalue: value })}
isDisabled={this.state.Disabled}
formatOptionLabel={formatResult}
/>
const formatResult = (item: any) => {
let imageurl = 'https://mywebsite/' + item.countrycode + '.gif';
return (
<div>
<div className={styles.Optiontablerow}>
<div className={styles.OptionImageCell}>
<img src={imageurl}></img>
</div>
<div className={styles.Optiontablecell}>{item.label}</div>
</div>
</div>
)
}
Now when i select the option, same format is appearing in selected options.
For selected options how to avoid this formatting?
Please help.
答案1
得分: 0
我已完成条件格式设置并解决了这个问题。
const formatResult = (item: any) => {
let imageurl = 'https://mywebsite/' + item.countrycode + '.gif';
return (
<div>
{item.isSelectedOption == false ?
<div className={styles.Optiontablerow}>
<div className={styles.OptionImageCell}>
<img src={imageurl}></img>
</div>
<div className={styles.Optiontablecell}>{item.label}</div>
</div> : {item.label}}
</div>
)
}
英文:
I have done conditional formatting and resolved this issue.
const formatResult = (item: any) => {
let imageurl = 'https://mywebsite/' + item.countrycode + '.gif';
return ( <div>
{item.isSelectedOption==false?
<div className={styles.Optiontablerow}>
<div className={styles.OptionImageCell}>
<img src={imageurl}></img>
</div>
<div className={styles.Optiontablecell}>{item.label}</div>
</div>:{item.label}}
</div>
)
}
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论