选定的值未显示在文本字段选择中 - 材质 UI 反应组件

Posted 2023-02-22

【中文标题】选定的值未显示在文本字段选择中 - 材质 UI 反应组件

【英文标题】：Selected Value not showing in Textfield Select - Material UI React Component

【发布时间】：2019-09-21 11:50:50

【问题描述】：

我有 TextField 根据变量中的一定数量的值选择 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
        );
    
  

状态更新正常，但文本字段不显示所选值。我已经尝试了我所知道的一切。任何帮助表示赞赏。

【问题讨论】：

请分享您的handleChange 方法。为什么会有value = '29' 道具？

我总是想在那个字段中显示 29

A CodeSandbox 复制您的问题将使提供帮助变得更加容易。

@Katamari 您能否按照 Ryan 的建议在 Code Sandbox 上创建演示。否则在这里真的很难帮助你们。

@maximus codesandbox.io/embed/priceless-dijkstra-oqxzi 我试图将我的问题和 OP 的问题归结为一个简单的版本，值状态正在设置但不可见

【参考方案1】：

因此，您尝试使用 e.target.value.id 访问键，但目标对象只有值而不是 id 本身。这就是为什么在您调用 handleChange 方法后它未定义的原因。不过有一种方法可以访问密钥：

回调不仅传递事件，还传递子对象作为第二个参数，这可用于获取键，如下所示：

handleChangeTest = (event, child) => 
    this.setState(
      selectedID: child.key,
      visibleValue: event.target.value
    );
  ;

这会将键设置为 selectedID 并将所选项目的值设置为 visibleValue。

【参考方案2】：

如果没有看到工作的 sn-p 或状态（尤其是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的值为value=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
  );
;

Working SandBox