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事件传递值？

当前回答

只需创建一个这样的函数

  function methodName(params) {
    //the thing  you wanna do
  }

在你需要的地方打电话

 <Icon onClick = {() => { methodName(theParamsYouwantToPass);} }/>

2020-01-22 07:04:55

其他回答

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

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

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

2019-11-01 12:28:18

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

2018-04-10 04:06:44

class TableHeader extends Component {
  handleClick = (parameter,event) => {
console.log(parameter)
console.log(event)

  }

  render() {
    return (
      <button type="button" 
onClick={this.handleClick.bind(this,"dataOne")}>Send</button>
    );
  }
}

2019-03-10 06:53:41

简单的方法

使用箭头功能：

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>
);

2015-04-22 23:43:29

[[h/t发送至@E.Sundin，以便在评论中链接此内容]

顶级答案（匿名函数或绑定）会起作用，但它不是最有效的，因为它为map（）函数生成的每个实例创建了事件处理程序的副本。

这是对ESLint插件反应最佳方式的解释：

项目列表渲染中绑定的一个常见用例是在渲染列表时每个列表项的单独回调：

const List = props => (
      <ul>
        {props.items.map(item =>
          <li key={item.id} onClick={() => console.log(item.id)}>
            ...
          </li>
        )}
      </ul>
    );

与其这样做，不如将重复的部分拉到自己的部分组件：

const List = props => (
      <ul>
        {props.items.map(item =>
          <ListItem 
            key={item.id} 
            item={item} 
            onItemClick={props.onItemClick} // assume this is passed down to List
           />
        )}
      </ul>
    );


const ListItem = props => {
  const _onClick = () => {
    console.log(props.item.id);
  }
    return (
      <li onClick={_onClick}>
        ...
      </li>
    );

});

这将加快渲染速度，因为它避免了创建新的函数（通过绑定调用）。

2016-08-12 01:48:55

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

推荐文章

最新文章

标签