在 React-Autocomplete 输入上有条件地显示项目

Question

我是 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 class 拉入 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 的用户自动完成，比如 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 数组中的另一个键，并使用友好版本保留自动完成键？

在此先感谢您的帮助！

Answer 1

所以我找到了友好显示值的解决方案。

我创建了一个函数来处理 Autocomplete 组件的 onSelect 属性。

  handleAutoComplete(value,name){
      //alert(JSON.stringify(this.state.userDataArray), null, 4);
      let aquiredUserId = value.value;
      let findUser = this.state.userDataArray.filter(obj => {
        return obj.userid === aquiredUserId
      })
        this.setState(
          prevState => ({
            newProject: {
              ...prevState.newProject,
              [name]: findUser[0].firstName+' '+findUser[0].lastName,
              clientid: aquiredUserId,
            },
            touched: {
              ...this.state.touched,
              [name]: true
            }          
          }),
          () => console.log(this.state.newProject,this.state.touched)
        );  
  }

这是更新后的组件：

<Autocomplete
  inputProps={{placeholder:'Client', name:"client"}}
  getItemValue={item => item.userid}
  items={this.state.userDataArray}
  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*/}

所以现在我的 Autocomplete 组件将值连同要用作它的键的名称一起发送到函数。

该函数使用用户的名字和姓氏更新组件的值，并使用用户 ID（这是后端实际关心的）更新另一个名为 clientid 的值。

我唯一还在做的事情就是动态更新 clientid 名称。所以它有点像 [name]+'id'（这目前不起作用，当我弄清楚后会更新）。

Answer 2

我明白了！通过在我的 handleAutoComplete 函数中使用过滤 JSON 对象的 javascript 函数（请参阅我的其他答案以供参考），我能够在将数据提供给 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 属性现在有一个额外的部分来过滤数据。

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

在 React-Autocomplete 输入上有条件地显示项目

Conditional display of items on React-Autocomplete input

arrays

json

autocomplete

conditional-statements

reactjs