Question

下面是我的html看起来像......

//everytime one of these partials is build, call the closure...
View::composer(['partial_1', 'partial_2'], function( $view )  
{
    //get the data needed in the partial
    $data = /* code */ 

    //pass the data to the partial
    $view->with([ 'data' => $data ]);
} );

下面是我的handleClick事件代码

<select onclick={this.handleClick}>
    <option key="1" value="aaa" data-plan-id="test"></option>
</select>

我的问题是如何从“data-plan-id”属性中获取“test”的值？

Answer 1

只需阅读selectedOptions HTMLCollection并从中获取第一个选项：

console.log(e.target.selectedOptions[0].getAttribute('data-plan-id'));

使用现代浏览器（IE11 +，请参阅support），您可以使用dataset界面而不是getAttribute：

console.log(e.target.selectedOptions[0].dataset.planId);

Answer 2

您需要遍历<option>的所有<select>并检查值是否相同。如果是，请检查dataset。这将有plan-id。

聚苯乙烯。 Javascript会将虚线数据属性转换为camelCase plan-id -> planId

希望这有帮助！

class App extends React.Component{
  constructor(){
    super()
    this.onChange = this.onChange.bind(this)
    this.state = {
      component: 'A'
    }
  }
  onChange(e){
    [...e.target.childNodes].forEach((el) => { //convert HTML collection to array
      if(el.value === e.target.value) 
        console.log(el.dataset.planId)
    })
    this.setState({
      component: e.target.value
    })
  }
  
  render(){
    return <div>
      <select onChange={this.onChange} selected={this.state.component}>
        <option value="aaa" data-plan-id="a plan">A</option>
        <option value="bbb" data-plan-id="b plan">B</option>
      </select>
    </div>
  }
}
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

我应该如何从react元素中获取自定义属性的值？

2 个答案: