Javascript 如何将对象绑定到输入标记，而不仅仅是使用ReactJS绑定值？

我不熟悉

ReactJS

。我有一个输入标签，当用户在输入中键入时，它会建议可能的值。此建议列表来自一个API，其中列表中的每个项都具有如下属性：

item: {
   'id': 'some_id',
   'name': 'some_name',
   'att1': 'some_att_1',
   'att2': 'some_att_2'
}

在我的代码中，我将“name”属性作为输入中的值，将“id”作为键，如下所示：

renderItem={(item, isHighlighted) => (
              <div
                key={item.id}
                style={{ background: isHighlighted ? "lightgray" : "white" }}>
                {item.name}
              </div>
            )}

onChange={e => {
              this.setState({ from: e.target.value });
              // do something here...
}}
onSelect={val => this.setState({ from: val })}
    renderMenu={function(items, value, style) {
       return (
            <div
            style={{ ...style, ...this.menuStyle, zIndex: 10 }}
            children={items}
            />
        );
}}

renderItem={（项目，ishighlight）=>(
{item.name}
)}

到目前为止还不错。然后我有如下所示的事件处理程序：

renderItem={(item, isHighlighted) => (
              <div
                key={item.id}
                style={{ background: isHighlighted ? "lightgray" : "white" }}>
                {item.name}
              </div>
            )}

onChange={e => {
              this.setState({ from: e.target.value });
              // do something here...
}}
onSelect={val => this.setState({ from: val })}
    renderMenu={function(items, value, style) {
       return (
            <div
            style={{ ...style, ...this.menuStyle, zIndex: 10 }}
            children={items}
            />
        );
}}

onChange={e=>{
this.setState（{from:e.target.value}）；
//在这里做点什么。。。
}}
onSelect={val=>this.setState（{from:val}）}
renderMenu={函数（项、值、样式）{
返回(
);
}}

---

如您所见，在

e.target

中，我可以访问原始项目的id或名称属性。但是，我需要访问

att1

和

att2

，因为当用户选择输入并单击按钮时，我需要将它们用作参数。我该怎么做？谢谢。

我不完全确定您的组件是如何设置的，所以我将采取一种不管怎样都能工作的方法

如果您有权访问所选值的ID，并且数据位于数组中，则可以在onChange事件中写入

onChange={e => {
    this.setState({ from: e.target.value });

    // This is where I'm unsure, is your ID e.target.value?
    const id = 0

    // I'm only using the first item in the filtered array 
    // because I am assuming your data id's are unique
    const item = items.filter(item=>item.id===id)[0]


    // Now down here you can access all of the item's data

}}

---

使用lodash之类的库，您可以使用名称或id查找值。以下是一个示例：

const项=[{
‘id’：‘some_id’，
“名字”：“某个名字”，
“att1”：“some_att_1”，
“附件2”：“一些附件2”
}]
log（u.find（项，{name:'some_name'}））
/*返回
{
“id”：“某个id”，
“名字”：“某个名字”，
“附件1”：“一些附件1”，
“附件2”：“一些附件2”
}
*/

---

您可以使用

查找

onChange={e => {
    this.setState({ from: e.target.value });
    let item = obj.find(val => val.id === e.target.value); // supposing item are your array of objects
// and e.target.value is the item id
}}


var obj=[{
‘id’：‘some_id’，
“名字”：“某个名字”，
“att1”：“some_att_1”，
“附件2”：“一些附件2”
},{
“id”：“some_id1”，
“名字”：“一些名字1”，
“附件1”：“一些附件11”，
“附件2”：“一些附件22”
}
];
让item=obj.find（val=>val.id=='some_id1'）；
控制台日志（“附件1”，第1项）；
控制台日志（“附件2”，附件2项）API是否返回单个对象
项
或其对象数组？项数组。我希望最终用户选择整个项目，而不仅仅是名称属性，而只是在输入框中呈现名称属性。这需要对
某些id1
进行硬编码。。。我需要将id作为变量传递。您可以使用
e.target.value
传递您的id。请检查我是否已更新我的ans。