reactjs - material-ui：MenuItem 的 SelectField 内部焦点

Question

我正在将具有大约 30 个选项的 SelectField 实现到移动应用程序中。效果很好，但是它用于大量快速数据输入。现在，由于手机屏幕尺寸的原因，我仅限于显示前 10 个左右的项目。

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

有什么方法可以轻松做到这一点？

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