Question

我在移动应用中实施了一个包含大约30种选择的SelectField。事情很有效，但它用于大量快速数据输入。现在，由于移动屏幕尺寸，我限制显示前10个左右的项目。

在Dropdown焦点上，我想关注中间（第15个左右）的MenuItem元素，因为最多选择的元素来自列表的中间。没有这个，用户必须点击＆amp;每次在每个数据条目的下拉列表中滚动。

有没有办法轻松做到这一点？

Answer 1

我不认为有简单的方法可以做到这一点，但可以做到。实际上，您可以在选择列表中间的选择字段中设置一个空的<MenuItem/>，以便在移动设备上使用您的应用时将其集中。空的<MenuItem/>不会显示在列表中。

然后，当onFocus获得焦点时，您将使用<MenuItem/>属性将状态设置为空<SelectField/>的值。这会使选择字段对列表中空<MenuItem/>所在的位置开放。

您可能希望确保您的空项目具有一些独特的价值，然后执行验证检查等。有点黑客但它有效。希望这会有所帮助。

我们可以使用这个基本示例来演示（使用es6胖箭头函数并从MaterialUI文档修改）。

  constructor(props) {
    super(props);
    this.state = {value: null};
  }

  handleChange = (event, index, value) => this.setState({value});

  handleFocus = () => {
     if(//Do checks for screen size here, if mobile){
        this.setState({value: 9999});
     }     
  }

  render() {
     const items = [
         <MenuItem value={0} primaryText='1'/>
         <MenuItem value={1} primaryText='2'/>
         <MenuItem value={2} primaryText='3'/>
         <MenuItem value={9999} />
         <MenuItem value={3} primaryText='4'/>
         <MenuItem value={4} primaryText='5'/>
    ];

    return (
      <SelectField maxHeight={300} value={this.state.value} onChange={this.handleChange} onFocus={() => this.handleFocus()}>
        {items}
      </SelectField>
    );
  }
}

material-ui：MenuItem的SelectField内焦点

1 个答案: