我有基于变量中一定数量值的 TextField Select Material UI 组件。
{this.state.selectedNextHops.map((nextHop, index) => (
<div>
<TextField
select
className="vnfprofile-field"
InputProps={{ className: 'variable-value site-details-view-textfield' }}
InputLabelProps={{ shrink: true }}
SelectProps={{
MenuProps: {
className: 'vnf-designer-value',
getContentAnchorEl: null,
anchorOrigin: {
vertical: 'bottom',
horizontal: 'left',
}
},
}}
value = {this.state.selectedNextHops[index] || ''}
disabled={this.props.newPopoverPanelView === 'VIEW' ? true : false}
onChange={(e) => this.handleChange('nexthop', e)}
>
{this.state.remainingNextHops.length !== 0 ? this.state.remainingNextHops.map((option, i) => (
<MenuItem key ={i} value = {option || ''}>
{option}
</MenuItem>
)) :
<MenuItem value = {'No Data Available'}>
{'No Data Available'}
</MenuItem>}
</TextField>
<TextField
className="vnfprofile-field subnet-textfield"
InputProps={{ className: 'variable-value' }}
InputLabelProps={{ shrink: true }}
value = {'29'}
/>
</div>
))
}
当我从上一个下拉列表中选择值并根据之前的选择过滤菜单时,TextFields 按顺序显示。
if(selectedNextHops.indexOf(event.target.value) === -1) {
selectedNextHops.push(event.target.value);
}
remainingNextHops = this.props.nextHopSapds.filter(nextHop => selectedNextHops.indexOf(nextHop) === -1);
this.setState({
selectedNextHops: selectedNextHops,
remainingNextHops: remainingNextHops
});
更新:这是我的 handleChange 方法 ->
handleChange(type, event) {
let selectedNextHops = JSON.parse(JSON.stringify(this.state.selectedNextHops));
let remainingNextHops = [];
if(type === 'nexthop') {
selectedNextHops = selectedNextHops.filter(nh => nh !== '');
isContentChanged = true;
if(selectedNextHops.indexOf(event.target.value) === -1) {
selectedNextHops.push(event.target.value);
}
remainingNextHops = this.props.nextHopSapds.filter(nextHop => selectedNextHops.indexOf(nextHop) === -1);
if(remainingNextHops.length !== 0) {
selectedNextHops.push('');
}
this.setState({
selectedNextHops: selectedNextHops,
remainingNextHops: remainingNextHops
});
}
}
状态更新正常,但文本字段不显示所选值。我已经尝试了我所知道的一切。任何帮助表示赞赏。
最佳答案
如果没有看到工作片段或状态(尤其是 this.state.selectedNextHops
),这很难调试,但基于 code sandbox提供(在评论中),我认为这是同样的问题,所以这个答案将适用于沙箱代码:
this.setState({
selectedID: event.target.value.id,
visibleValue: event.target.value.name
});
event.target.value.id
和 event.target.value.name
是 undefined
,
console.log(console.log(event.target)) // {value: "S0002", name: undefined}
对于select
要显示一个选中的option
,value
属性两者需要匹配:
<select value="2">
^^^^^^^^^
<option value="1">first value</option>
<option value="2">second value</option>
^^^^^^^^^
</select>
在代码沙箱的例子中,Select
的值为value={this.state.visibleValue}
,options的值为值={x.label}
由于 this.state.visibleValue
始终为 undefined
,因此您永远不会看到 select
更新的值。
对此的快速解决方法是将 handleChage
函数更改为:
handleChangeTest = event => {
this.setState({
selectedID: event.target.id,
visibleValue: event.target.value
});
};
但这将使 selectedID
未定义,要设置它,将属性 id={x.id}
添加到 option
并使用event.currentTarget
获取其值:
{this.state.data.map(x => (
<MenuItem key={x.id} value={x.label} id={x.id}>
^^^^^^^^^
{x.name}
</MenuItem>
))}
还有
handleChangeTest = event => {
this.setState({
selectedID: event.currentTarget.id,
^^^^^^^^^^^^^^^^^^^^^^
visibleValue: event.target.value
});
};
关于reactjs - 选定的值未显示在文本字段选择中 - Material UI react 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55961224/