React js onClick无法将值传递给方法

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

当前回答

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

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

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

2019-11-01 12:28:18

其他回答

如今，有了ES6，我觉得我们可以使用更新的答案。

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

基本上，（对于任何不知道的人）由于onClick期望传递给它一个函数，所以bind可以工作，因为它创建了一个函数的副本。相反，我们可以传递一个箭头函数表达式，它只调用我们想要的函数，并保留它。您应该永远不需要在React中绑定渲染方法，但如果由于某种原因，您在某个组件方法中丢失了这一点：

constructor(props) {
  super(props);
  this.myMethod = this.myMethod.bind(this);
}

2016-03-02 13:42:11

我意识到这已经很晚了，但我认为一个更简单的解决方案可以满足许多用例：

    handleEdit(event) {
        let value = event.target.value;
    }

    ...

    <button
        value={post.id}
        onClick={this.handleEdit} >Edit</button>

我想你也可以使用数据属性。

简单、语义。

2019-03-08 20:21:42

交替尝试回答OP的问题，包括e.preventDefault（）调用：

渲染链接（ES6）

<a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}>

组件功能

handleSort = (e, param) => {
  e.preventDefault();
  console.log('Sorting by: ' + param)
}

2017-10-06 16:48:58

这是一个非常简单的方法。

 onClick={this.toggleStart('xyz')} . 
  toggleStart= (data) => (e) =>{
     console.log('value is'+data);  
 }

2018-07-27 18:41:48

有三种方法可以处理此问题：-

将构造函数中的方法绑定为：-导出类HeaderRows扩展组件{构造器（）{super（）；this.handleSort=this.handleSort.bind（this）；}}将箭头函数创建为：-手柄端口=（）=>{//这里有些文字}第三种方式是：-<th value＝｛column｝onClick＝｛（）＝＞that.handleSort｝＞｛column｝</th＞

2018-02-01 08:40:06

React js onClick无法将值传递给方法

推荐文章

最新文章

标签