arrays - React-Autocomplete 输入项的条件显示

问题描述

我是 React.js 的新手，但我熟悉 JavaScript，我正在尝试构建一个表单，该表单可以使用存储在 JSON 数据文件中的用户信息自动完成字段。

我找到了允许我这样做的 react-autocomplete 库。我设法让它工作，我对整体的基本功能感到满意。现在我正在尝试微调行为，使其适合我的项目需求。

这是我如何让它工作的。我知道这可能不是最优雅的方式，但请记住，我最近几天才开始摆弄 React，大多数架构和协议对我来说仍然是超级新的。

JSON 用户数据数组如下所示（我存储了几个用户）：

[{
  "userid": "578",
  "firstName": "Alfie",
   "lastName": "Robles",
   "username": "anekdamian",
   "userLevel": "0",
   "projects": ""
 }]

userLevel是一个从 0 到 5 的数值。并且projects是用户分配的项目数。

JSON 数据被导入到 userImport 变量中，然后馈送到 userDataArray 对象：

let userImport = require('../cache/users.json');
this.state = {
      newProject: {
        address: '',
        city: '',
        state: '',
        zip: '',
        contractor: '',
        projectManager: '',
        client: '',
        status: []       
      },
      statusOptions: ["Backlog", "Open", "In Progress", "Under Review"],
      touched: {
        address: false,
        city: false,
        state: false,
        zip: false,
        contractor: false,
        projectManager: false,
        client: false,
        status: false  
      },
      userDataArray: userImport
    };

然后，数据被Autocomplete类拉到items属性中：

<Autocomplete
  name={"client"}
  inputProps={{ placeholder:'Client'}}
  getItemValue={item => item.userid}
  items={this.state.userDataArray}
  renderItem={(item, isHighlighted) =>
    <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
      {item.firstName}{' '}{item.lastName}{' ('}{item.username}{')'}
    </div>
  }
  value={this.state.value}
  onChange={(event, value) => this.setState({ value })}
  onSelect={value => this.setState({ value })}
/>{" "}
{/* Client of the Project*/}

到目前为止，一切都很好！这个实现是有效的。

这是它在行动中的样子：

现在，我想做的是做一个条件语句，它只会自动完成具有userLevel低于的用户，比如3.

我想知道如何执行这种类型的条件语句，以便我可以通过特定标准（项目数量、用户级别等）限制自动完成功能显示的建议

由于我是 React 的新手，我还不确定你在哪里以及如何执行这种类型的条件语句。我一直在查看 react-Autocomplete 库的示例以及我能找到的有关该主题的所有教程，但我还没有弄明白。

The other thing is that when a suggested user is selected, the value of the input is set to the userid, which is what I want. 但是有没有办法让用户仍然显示全名呢？只是为了保持用户体验友好。

我需要为此创建一个隐藏的输入吗？或者也许将 ID 值传递给数组中的不同键，this.state并将自动完成的键保留为友好版本？

在此先感谢您的帮助！

标签： arraysjsonreactjsautocompleteconditional-statements

我知道了！通过在我的函数中使用过滤 JSON 对象的 javascript 函数handleAutoComplete（请参阅我的其他答案以获取此参考资料），我能够在将数据提供给Autocomplete组件时执行相同的操作。

现在看起来像这样：

<Autocomplete
  inputProps={{placeholder:'Client', name:"client"}}
  getItemValue={item => item.userid}
  items={this.state.userDataArray.filter(obj => {
    return obj.userLevel <= '3'
  })}
  renderItem={(item, isHighlighted) =>
    <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
      {item.firstName}{' '}{item.lastName}
    </div>
  }
  value={this.state.newProject.client}
  onChange={(event, value) => this.setState({ value })}
  onSelect={value=> this.handleAutoComplete({value},'client')}
/>{" "}
{/* Client of the Project*/}

注意items属性现在有一个额外的部分来过滤掉数据。

所以这回答了我的问题，我希望这可以帮助那里的人！

arrays - React-Autocomplete 输入项的条件显示

问题描述

解决方案

推荐阅读