javascript - 如何使用 ReactJS 将对象绑定(bind)到输入标签而不仅仅是值？

Question

我是 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，因为当用户选择输入并单击按钮时，我需要将它们用作参数。我怎样才能做到这一点？谢谢。

Answer 1

您可以使用查找

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);