Question

我是ReactJS的新手。我有一个输入标记，用于在用户输入时输入可能的值。此建议列表来自API，其中列表中的每个项目都具有以下属性：

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

在我的代码中，我渲染了＆＃39;名称＆＃39;属性作为输入中的值和＆＃39; id＆＃39;如下所示的关键：

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或名称属性。但是，我需要访问att1和att2，因为当用户选择输入并点击按钮时，我需要将它们用作参数。我怎样才能做到这一点？感谢。

Answer 1

您可以使用find

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

Answer 2

我不完全确定您的组件是如何设置的，因此我将采用一种无论如何都能正常工作的方法。

如果您有权访问所选值的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

}}

Answer 3

使用像lodash这样的库，您可以使用名称或ID找到值。这是一个例子：

const items = [{
   'id': 'some_id',
   'name': 'some_name',
   'att1': 'some_att_1',
   'att2': 'some_att_2'
}]

console.log(_.find(items, { name: 'some_name'}))

/* Returns
{
  "id": "some_id",
  "name": "some_name",
  "att1": "some_att_1",
  "att2": "some_att_2"
}
*/

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

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

3 个答案: