Question

我有TextField根据变量中一定数量的值选择Material UI组件。

$ t python2 -c 'import requests'
0m0.174s
$ t python3 -c 'import requests'
0m0.403s
$ t python2 -c 'import bs4'
0m0.256s
$ t python3 -c 'import bs4'
0m0.431s

当我从上一个下拉列表中选择值并根据先前的选择过滤菜单时，TextFields依次显示。

{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>
                ))
          }

更新：这是我的handleChange方法->

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
        });

状态正在正常更新，但文本字段未显示所选值。我已经尽力了。任何帮助表示赞赏。

Answer 1

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

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

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

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

希望这会有所帮助。编码愉快。

Answer 2

这很难调试，而不会看到有效的代码段或状态（尤其是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}，选项的值为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

所选值未显示在“文本字段选择”中-材质UI React组件

2 个答案: