React - 如何在select下拉列表中获取父属性值

Question

<ul>
    {
        this.state.pics ? this.state.pics.map((pic, index) => {
            return (
                <li key={index}>
                    <img src={pic.url} height="200" alt="Image preview..." />
                    <select data-id={index} onChange={this.setValue}>
                        <option value="1" >Monday</option>
                        <option value="2">Tuesday</option>
                        <option value="3">Wednesday</option>
                        <option value="4">Thursday</option>
                        <option value="4">Friday</option>
                        <option value="4">Saturday</option>
                        <option value="4">Sunday</option>
                    </select>
                </li>
            )
        }) : ""
    }
</ul>

在每次更改时，我都希望获得data-id属性的值，该值只是index的值。或者有没有办法直接访问li的key属性值。我正在使用反应。通过查询选择器直接访问dom也是一种很好的做法

Answer 1

除了通过事件API访问DOM的纯JS解决方案（在您的情况下），您还可以使用Refs feature of React

但正如文档本身所说

避免使用refs来做任何可以声明性地完成的事情。

在您的情况下，访问select元素的自定义属性非常简单

1. 为您希望访问DOM的元素创建一个ref
2. 将其分配给可在事件回调中访问的变量
3. 访问变量，该变量在函数中具有DOM引用。

   <select
     ref={select => (this.selectElement = select)}
     data-id={1}
     onChange={this.setValue}>

可以在CodeSandox link找到样品

并回答你的另一个问题“通过查询选择器直接访问dom也是一个很好的做法” - 我会说使用它作为最后的手段，大多数问题可以通过移动道具和状态来解决组件层次结构。

推荐阅读

1. Lifting State Up
2. Thinking in React

Answer 2

const setValue = (e) => {
 console.log(e.target.getAttribute('data-id'))
}

onChange回调获取正常的javascript事件对象，可用于访问所需的属性。

Answer 3

你可以试试像这样的$(this).parent().attr('data-id');