我想读取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事件传递值?


当前回答

我想您必须将该方法绑定到React的类实例。使用构造函数绑定React中的所有方法更安全。在将参数传递给方法的情况下,第一个参数用于绑定方法的“this”上下文,因此无法访问方法内部的值。

其他回答

需要简单更改:

使用<th value={column}onClick={that.handleSort}>{column}</th>

而不是<th value={column}onClick={that.handleSort}>{column}</th>

简单的方法

使用箭头功能:

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

这将创建一个新函数,该函数使用正确的参数调用handleSort。

更好的方式

将其提取到子组件中。在渲染调用中使用箭头函数的问题是,它每次都会创建一个新函数,最终导致不必要的重新渲染。

如果创建子组件,则可以传递处理程序并使用props作为参数,然后仅在props更改时重新渲染(因为处理程序引用现在从未更改):

子组件

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

主要部件

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

旧简易方式(ES5)

使用.bind传递所需的参数,这样可以将函数与Component上下文绑定:

return (
  <th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);

我认为,React地图中的.bind(this,arg1,arg2,…)是错误的代码,因为它很慢!单个渲染方法中的.bind(this)的10-50-非常慢的代码。我是这样修复的:Render方法<tbody onClick={this.handleClickRow}><tr data id={listItem.id}>的映射处理程序var id=$(ev.target)最近('tr').data().id

完整代码如下:

类MyGrid扩展了React.Component{//实际上,我是从Redux中connect设置的道具中得到的状态={列表:[{id:1,姓名:“Mike”},{id:2,名称:“Bob”},{id:3,名称:“弗雷德”}],selectedItemId:3}渲染(){const{list,selectedItemId}=this.stateconst{handleClickRow}=此返回(<表><tbodyonClick={handleClickRow}>{list.map(listItem=>(<tr key={listItem.id}data id={listItem.id{className={selectedItemId==listItem.i?“selected”:“”}><td>{listItem.id}</td><td>{listItem.name}</td></tr>))}</tbody></table>)}handleClickRow=(ev)=>{常量目标=ev.target//您可以使用您想要查找的带有ID的TR,我使用jQueryconst数据集=$(target)最近('tr').data()if(!dataset||!dataset.id)返回this.setState({selectedItemId:+dataset.id})alert(dataset.id)//玩得开心!}}ReactDOM.render(<MyGrid/>,document.getElementById(“ReactDOM”))表{边界塌陷:塌陷;}.选定td{背景色:rgba(0,0,255,0.3);}<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js“></script><script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js“></script><script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“react dom”></div>

有很多性能方面的考虑,都是在真空中。这个处理程序的问题是,您需要讨好它们,以便将无法在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中就一直使用这种方式。

使用this.handleSort。js中没有关键字。谢谢兄弟。

onClick={this.handleSort}