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 类将数据拉入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 库的示例以及我能找到的有关该主题的所有教程，但我还没有弄明白。

另一件事是，当一个建议的用户被选中时，输入的值被设置为userid，这正是我想要的。但是有没有办法让用户仍然显示全名呢？只是为了保持用户体验友好。

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

提前感谢您的帮助！

Answer 1

我明白了！ 通过在我的 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 属性现在有一个额外的部分来过滤数据。

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

Answer 2

于是我找到了一个友好显示值的解决方案。

我创建了一个函数来处理我的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'（这目前不起作用，当我弄清楚时会更新）。