我是 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}
/>
);
}}
如您所见,在 e.target
中我可以访问原始项目的 id 或 name 属性。但是,我需要访问 att1
和 att2
,因为当用户选择输入并单击按钮时,我需要将它们用作参数。我怎样才能做到这一点?谢谢。
最佳答案
您可以使用查找
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',
'name': 'some_name',
'att1': 'some_att_1',
'att2': 'some_att_2'
},{
'id': 'some_id1',
'name': 'some_name1',
'att1': 'some_att_11',
'att2': 'some_att_22'
}
];
let item = obj.find(val => val.id === 'some_id1');
console.log("att1", item.att1);
console.log("att2", item.att2);
关于javascript - 如何使用 ReactJS 将对象绑定(bind)到输入标签而不仅仅是值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48088753/