Question

我需要在其内部设置多个数据属性和自定义信息。不幸的是，这不起作用：

    <p data={"Very important info"} onClick={this.accessAttributes}
data2={"A lot of important info"}></p>

accessAttributes = e =>{
ToggleFavorito = (e) =>{

  let data1=e.currentTarget.data;
  let data2=e.currentTarget.data2;
  console.log(data1, data2)

}

它返回“未定义”。

我该怎么做？

Answer 1

您可以使用dataset api

基本上，您是从data-some-field转换为target.dataset.someField，而some-field则转换为驼色someField（target.dataset是具有您在其中设置属性的地图对象道具的时尚风格）

看这个小提琴

class HelloWorld extends React.Component {

  accessAttributes(e){
    let data1 = e.target.dataset.value;
    let data2 = e.target.dataset.numberTwo;
    console.log(`data1: ${data1}`);
    console.log(`data2: ${data2}`);
}

    render() {
        return <p data-value={"Very important info"} onClick={this.accessAttributes}
data-number-two={"A lot of important info"}>P TAG!</p>;
    }
}

ReactDOM.render(<HelloWorld />, document.getElementById('app'));

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

请记住，到data- naming conventions，您不能使用数字来命名data-字段

Answer 2

如果您打算将data或data2用作常规html属性，则可以使用


accessAttributes = e =>{
  let data1=e.currentTarget.getAttribute("data");
  let data2=e.currentTarget.getAttribute("data2")
  console.log(data1, data2)
}

如果您希望它们作为data-attributes，则可以使用


<p data-one={"Very important info"} onClick={this.accessAttributes}
data-two={"A lot of important info"}></p>

accessAttributes = e =>{
  let data1=e.currentTarget.dataset.one
  let data2=e.currentTarget.dataset.two
  console.log(data1, data2)
}

顺便说一句，如果您的p处于渲染状态，则p内没有可单击的内容。或者至少它应该具有高度和宽度。

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  
  accessAttributes = e =>{
  let data1=e.currentTarget.getAttribute("data");
  let data2=e.currentTarget.getAttribute("data2")
    console.log(data1, data2)
  }
   
  accessAttributes2 = e =>{
  let data1=e.currentTarget.dataset.one;
  let data2=e.currentTarget.dataset.two;
  console.log(data1, data2)
}

  render() {
    return (
      <div>
        <p data={"Very important info"} onClick={this.accessAttributes}
            data2={"A lot of important info"}>x</p>

        <p data-one={"Very important info"} onClick={this.accessAttributes2}
            data-two={"A lot of important info"}>y</p>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

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

Answer 3

在HTML data属性中存储然后检索数据，这在React中似乎是一种反模式。如果您试图通过事件处理程序触发的元素传递数据，则可以将其作为参数传递。

这是一个简化的示例：

function MyComponent() {
    const data = "data";
    const data2 = "data2";
    function accessAttributes(event, attributes) {
        console.log(attributes);
        // {data: "data", data2: "data2"}
    }
    return (
        <div>
            <p onClick={() => accessAttributes(event, {data, data2})}>
                Lorem ipsum...
            </p>
        </div>
    );
}

React中的多个数据属性

3 个答案: