我想读取onClick事件值财产。但当我点击它时,我在控制台上看到类似这样的内容:

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

我的代码工作正常。运行时,我可以看到{column},但无法在onClick事件中获取它。

我的代码:

var HeaderRows = React.createClass({
  handleSort:  function(value) {
    console.log(value);
  },
  render: function () {
    var that = this;
    return(
      <tr>
        {this.props.defaultColumns.map(function (column) {
          return (
            <th value={column} onClick={that.handleSort} >{column}</th>
          );
        })}
        {this.props.externalColumns.map(function (column) {
          // Multi dimension array - 0 is column name
          var externalColumnName = column[0];
          return ( <th>{externalColumnName}</th>);
        })}
      </tr>
    );
  }
});

如何在React js中向onClick事件传递值?


当前回答

您可以这样使用代码:

<th value={column} onClick={(e) => that.handleSort(e, column)} >{column}</th>

这里e表示事件对象,如果您想在句柄函数中使用preventDefault()之类的事件方法,或者想获得e.target.name之类的目标值或名称。

其他回答

有很多性能方面的考虑,都是在真空中。这个处理程序的问题是,您需要讨好它们,以便将无法在props中命名的参数合并进来。这意味着组件需要每个可单击元素的处理程序。让我们同意,对于几个按钮来说,这不是问题,对吧?当您处理具有数十列和数千行的表格数据时,就会出现问题。在这里,您会注意到创建这么多处理程序的影响。

事实是,我只需要一个。我将处理程序设置在表级别(或UL或OL…),当单击发生时,我可以使用事件对象中的可用数据来判断单击的单元格:

nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName 
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent

我使用标记名字段检查单击是否发生在有效元素中,例如忽略页脚中的单击。rowIndex和cellIndex提供了所单击单元格的确切位置。Textcontent是单击单元格的文本。

这样,我不需要将单元格的数据传递给处理程序,它可以自助处理。如果我需要更多的数据,不需要显示的数据,我可以使用dataset属性或隐藏元素。通过一些简单的DOM导航,一切都在手边。自从PC更容易陷入困境以来,HTML中就一直使用这种方式。

不知从何而来回答这个问题,但我认为,bind会奏效。找到下面的示例代码。

const handleClick = (data) => {
    console.log(data)
}

<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>

通过将count作为参数从主组件传递到子组件,实现显示对象的总计数,如下所述。

这里是MainComponent.js

import React, { Component } from "react";

import SubComp from "./subcomponent";

class App extends Component {

  getTotalCount = (count) => {
    this.setState({
      total: this.state.total + count
    })
  };

  state = {
    total: 0
  };

  render() {
    const someData = [
      { name: "one", count: 200 },
      { name: "two", count: 100 },
      { name: "three", count: 50 }
    ];
    return (
      <div className="App">
        {someData.map((nameAndCount, i) => {
          return (
            <SubComp
              getTotal={this.getTotalCount}
              name={nameAndCount.name}
              count={nameAndCount.count}
              key={i}
            />
          );
        })}
        <h1>Total Count: {this.state.total}</h1>
      </div>
    );
  }
}

export default App;

这里是SubComp.js

import React, { Component } from 'react';
export default class SubComp extends Component {

  calculateTotal = () =>{
    this.props.getTotal(this.props.count);
  }

  render() {
    return (
      <div>
        <p onClick={this.calculateTotal}> Name: {this.props.name} || Count: {this.props.count}</p>
      </div>
    )
  }
};

尝试实现上述内容,您将得到传递参数如何在任何DOM方法上的reactjs中工作的确切场景。

这是我的方法,不知道有多糟糕,请评论

在可单击元素中

return (
    <th value={column} onClick={that.handleSort} data-column={column}>   {column}</th>
);

然后

handleSort(e){
    this.sortOn(e.currentTarget.getAttribute('data-column'));
}

React Hooks解决方案2022

const arr = [
  { id: 1, txt: 'One' },
  { id: 2, txt: 'Two' },
  { id: 3, txt: 'Three' },
]

const App = () => {
  const handleClick = useCallback(
    (id) => () => {
      console.log("ID: ", id)
    },
    [],
  )

  return (
    <div>
      {arr.map((item) => (
        <button onClick={handleClick(item.id)}>{item.txt}</button>
      ))}
    </div>
  )
}

您可以传递一个函数以使用Callback的返回,然后可以通过传递参数在渲染中正常调用函数!只需确保正确设置useCallback的依赖数组。

React>=16的最佳解决方案

我发现在不使用内联函数的情况下调用onClick、onChange等中具有多个参数的函数的最干净的方法是使用React 16和更高版本中提供的自定义数据属性。

const App = () => {
  const onClick = (e) => {
    const value1 = e.currentTarget.getAttribute("data-value1")
    const value2 = e.currentTarget.getAttribute("data-value2")
    const value2 = e.currentTarget.getAttribute("data-value2")
    console.log("Values1", value1)
    console.log("Values2", value2)
    console.log("Values3", value3)
  }
  return (
    <button onClick={onClick} data-value1="a" data-value2="b" data-value3="c" />
  )
}

上面的示例是针对功能组件的,但即使在类组件中,实现也非常相似。

这种方法不会产生不必要的重新渲染,因为您没有使用内联函数,并且可以避免使用这种方法绑定的麻烦。

它允许您在函数中传递任意数量的值。

如果要将值作为道具传递给子组件的onClick中使用的子组件,则也可以在那里使用此方法,而无需创建包装函数。

在您希望将对象的id传递给onClick的情况下,也可以使用对象数组,如下所示。

const App = () => {
  const [arrState, setArrState] = useState(arr)

  const deleteContent = (e) => {
    const id = e.currentTarget.getAttribute("data-id")
    const tempArr = [...arrState]
    const filteredArr = tempArr.filter((item) => item.id !== id)
    setArrState(filteredArr)
  }

  return (
    <div>
      {arrState.map((item) => (
        <React.Fragment key={item.id}>
          <p>{item.content}</p>
          <button onClick={deleteContent} data-id={item.id}>
            Delete
          </button>
        </React.Fragment>
      ))}
    </div>
  )
}