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

Question

我想阅读 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 事件？

Answer 1

简单的方法

使用箭头函数：

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

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

更好的方式

Extract it into a sub-component. 在渲染调用中使用箭头函数的问题是它每次都会创建一个新函数，最终导致不必要的重新渲染。

如果你创建一个子组件，你可以传递 handler 并使用 props 作为参数，然后只有当 props 改变时才会重新渲染（因为 handler 引用现在永远不会改变）：

子组件

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 传递您想要的参数，这样您就可以将函数与组件上下文绑定：

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

Answer 2

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

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

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

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

Answer 3

class extends React.Component {
    onClickDiv = (column) => {
        // do stuff
    }
    render() {
        return <div onClick={() => this.onClickDiv('123')} />
    }
}

Answer 4

不涉及 .bind 或 ES6 的另一种选择是使用带有处理程序的子组件来调用具有必要道具的父处理程序。这是一个示例（下面是一个 link 的工作示例）：

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

// A child component to pass the props back to the parent handler
var TableHeader = React.createClass({
  propTypes: {
    value: React.PropTypes.string,
    onClick: React.PropTypes.func
  },
  render: function () {
    return (
      <th value={this.props.value} onClick={this._handleClick}
        {this.props.children}
      </th>
    )        
  },
  _handleClick: function () {
    if (this.props.onClick) {
      this.props.onClick(this.props.value);
    }
  }
});

基本思路是父组件将onClick函数传递给子组件。子组件调用 onClick 函数并可以访问传递给它的任何 props（和 event），允许您在父组件中使用任何 event 值或其他道具onClick 函数。

这里 CodePen demo 展示了此方法的实际应用。

Answer 5

[[h/t 到 @E.Sundin 评论 linking this]

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

这是 ESLint-plugin-react:

对最佳方法的解释

Lists of Items

A common use case of bind in render is when rendering a list, to have a separate callback per list item:

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

Rather than doing it this way, pull the repeated section into its own component:

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

});

This will speed up rendering, as it avoids the need to create new functions (through bind calls) on every render.

Answer 6

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

完整代码如下：

class MyGrid extends React.Component {
  // In real, I get this from props setted by connect in Redux
  state = {
    list: [
      {id:1, name:'Mike'},
      {id:2, name:'Bob'},
      {id:3, name:'Fred'}
    ],
    selectedItemId: 3
  }
  
  render () {
    const { list, selectedItemId }  = this.state
    const { handleClickRow } = this

    return (
      <table>
        <tbody onClick={handleClickRow}>
          {list.map(listItem =>(
            <tr key={listItem.id} data-id={listItem.id} className={selectedItemId===listItem.id ? 'selected' : ''}>
              <td>{listItem.id}</td>
              <td>{listItem.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    )
  }
  
  handleClickRow = (ev) => {
    const target = ev.target
    // You can use what you want to find TR with ID, I use jQuery
    const dataset = $(target).closest('tr').data()
    if (!dataset || !dataset.id) return
    this.setState({selectedItemId:+dataset.id})
    alert(dataset.id) // Have fun!
  }
}

ReactDOM.render(<MyGrid/>, document.getElementById("react-dom"))

table {
  border-collapse: collapse;
}

.selected td {
  background-color: 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>

Answer 7

这是我的做法，不知道效果如何，欢迎评论

在可点击元素中

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

然后

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

Answer 8

我对 JSX onClick 事件有以下 3 个建议 -

实际上，我们不需要在代码中使用 .bind() 或 Arrow 函数。您可以在代码中简单使用。

您还可以将 onClick 事件从 th(或 ul) 移动到 tr(或 li) 以提高性能。基本上你的 n li 元素会有 n 个 "Event Listeners"。

So finally code will look like this:
<ul onClick={this.onItemClick}>
    {this.props.items.map(item =>
           <li key={item.id} data-itemid={item.id}>
               ...
           </li>
      )}
</ul>

// 您可以在 onItemClick 方法中访问 item.id，如下所示：

onItemClick = (event) => {
   console.log(e.target.getAttribute("item.id"));
}

我同意上面提到的为 ListItem 和 List 创建单独的 React 组件的方法。这使代码看起来不错，但是如果您有 1000 个 li，那么将创建 1000 个事件侦听器。请确保你不应该有太多的事件监听器。

import React from "react";
import ListItem from "./ListItem";
export default class List extends React.Component {

    /**
    * This List react component is generic component which take props as list of items and also provide onlick
    * callback name handleItemClick
    * @param {String} item - item object passed to caller
    */
    handleItemClick = (item) => {
        if (this.props.onItemClick) {
            this.props.onItemClick(item);
        }
    }

    /**
    * render method will take list of items as a props and include ListItem component
    * @returns {string} - return the list of items
    */
    render() {
        return (
            <div>
              {this.props.items.map(item =>
                  <ListItem key={item.id} item={item} onItemClick={this.handleItemClick}/>
              )}
            </div>
        );
    }

}


import React from "react";

export default class ListItem extends React.Component {
    /**
    * This List react component is generic component which take props as item and also provide onlick
    * callback name handleItemClick
    * @param {String} item - item object passed to caller
    */
    handleItemClick = () => {
        if (this.props.item && this.props.onItemClick) {
            this.props.onItemClick(this.props.item);
        }
    }
    /**
    * render method will take item as a props and print in li
    * @returns {string} - return the list of items
    */
    render() {
        return (
            <li key={this.props.item.id} onClick={this.handleItemClick}>{this.props.item.text}</li>
        );
    }
}

Answer 9

这里有很好的答案，我同意@Austin Greco（带有单独组件的第二个选项）
我喜欢另一种方式，currying.
您可以做的是创建一个接受参数（您的参数）的函数和 returns 另一个接受另一个参数（在本例中为点击事件）的函数。然后你就可以随心所欲地使用它了。

ES5:

handleChange(param) { // param is the argument you passed to the function
    return function (e) { // e is the event object that returned

    };
}

ES6:

handleChange = param => e => {
    // param is the argument you passed to the function
    // e is the event object that returned
};

你会这样使用它：

<input 
    type="text" 
    onChange={this.handleChange(someParam)} 
/>

以下是此类用法的完整示例：

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => e => {
    const nextValue = e.target.value;
    this.setState({ ["value" + param]: nextValue });
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

请注意，此方法无法解决在每次渲染时创建新实例的问题。
与其他内联处理程序相比，我更喜欢这种方法，因为在我看来，这种方法更加简洁易读。

编辑：
正如下面评论中所建议的，您可以缓存/记忆函数的结果。

这是一个天真的实现：

let memo = {};

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => {
    const handler = e => {
      const nextValue = e.target.value;
      this.setState({ ["value" + param]: nextValue });
    }
    if (!memo[param]) {
      memo[param] = e => handler(e)
    }
    return memo[param]
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div key={obj}>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Answer 10

此示例可能与您的稍有不同。但我可以向您保证，这是解决此问题的最佳解决方案。我已经搜索了几天没有性能问题的解决方案。终于想到了这个。

class HtmlComponent extends React.Component {
  constructor() {
    super();
    this.state={
       name:'MrRehman',
    };
    this.handleClick= this.handleClick.bind(this);
  }

  handleClick(event) {
    const { param } = e.target.dataset;
    console.log(param);
    //do what you want to do with the parameter
  }

  render() {
    return (
      <div>
        <h3 data-param="value what you wanted to pass" onClick={this.handleClick}>
          {this.state.name}
        </h3>
      </div>
    );
  }
}

更新

incase 你想处理应该是参数的对象。您可以使用 JSON.stringify(object) 将其转换为字符串并添加到数据集中。

return (
   <div>
     <h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
        {this.state.name}
     </h3>
   </div>
);

Answer 11

我写了一个可以重复使用的包装器组件，它建立在此处接受的答案的基础上。但是，如果您需要做的只是传递一个字符串，那么只需添加一个数据属性并从 e.target.dataset 中读取它（就像其他人所建议的那样）。默认情况下，我的包装器将绑定到任何以 'on' 开头的函数属性，并在所有其他事件参数之后自动将数据属性传递回调用者。虽然我没有测试过它的性能，但它会让你有机会避免自己创建 class，并且可以像这样使用它：

const DataButton = withData('button')

const DataInput = withData('input');

或组件和功能

const DataInput = withData(SomeComponent);

或者如果您愿意

const DataButton = withData(<button/>)

声明在您的容器外（靠近您的进口）

这里是容器中的用法：

import withData from './withData';
const DataInput = withData('input');

export default class Container extends Component {
    state = {
         data: [
             // ...
         ]
    }

    handleItemChange = (e, data) => {
        // here the data is available 
        // ....
    }

    render () {
        return (
            <div>
                {
                    this.state.data.map((item, index) => (
                        <div key={index}>
                            <DataInput data={item} onChange={this.handleItemChange} value={item.value}/>
                        </div>
                    ))
                }
            </div>
        );
    }
}

这是封装代码'withData.js:

import React, { Component } from 'react';

const defaultOptions = {
    events: undefined,
}

export default (Target, options) => {
    Target = React.isValidElement(Target) ? Target.type : Target;
    options = { ...defaultOptions, ...options }

    class WithData extends Component {
        constructor(props, context){
            super(props, context);
            this.handlers = getHandlers(options.events, this);        
        }

        render() {
            const { data, children, ...props } = this.props;
            return <Target {...props} {...this.handlers} >{children}</Target>;
        }

        static displayName = `withData(${Target.displayName || Target.name || 'Component'})`
    }

    return WithData;
}

function getHandlers(events, thisContext) {
    if(!events)
        events = Object.keys(thisContext.props).filter(prop => prop.startsWith('on') && typeof thisContext.props[prop] === 'function')
    else if (typeof events === 'string')
        events = [events];

    return events.reduce((result, eventType) => {
        result[eventType] = (...args) => thisContext.props[eventType](...args, thisContext.props.data);
        return result;
    }, {});
}

Answer 12

我已经添加了用于通过两种方式将 onclick 事件值传递给该方法的代码。 1.使用绑定方法 2. 使用箭头（=>）方法。查看方法 handlesort1 和 handlesort

var HeaderRows  = React.createClass({
    getInitialState : function() {
      return ({
        defaultColumns : ["col1","col2","col2","col3","col4","col5" ],
        externalColumns : ["ecol1","ecol2","ecol2","ecol3","ecol4","ecol5" ],

      })
    },
    handleSort:  function(column,that) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    handleSort1:  function(column) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    render: function () {
        var that = this;
        return(
        <div>
            <div>Using bind method</div>
            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : '40' }}onClick={that.handleSort.bind(that,column)} >{column}</div>
                );
            })}
            <div>Using Arrow method</div>

            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : 40}} onClick={() => that.handleSort1(column)} >{column}</div>

                );
            })}
            {this.state.externalColumns.map(function (column) {
                // Multi dimension array - 0 is column name
                var externalColumnName = column;
                return (<div><span>{externalColumnName}</span></div>
                );
            })}

        </div>);
    }
});

Answer 13

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

渲染 link (ES6)

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

组件函数

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

Answer 14

使用箭头函数：

您必须安装第 2 阶段：

npm 安装 babel-preset-stage-2：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value=0
        }
    }

    changeValue = (data) => (e) => {
        alert(data);  //10
        this.setState({ [value]: data })
    }

    render() {
        const data = 10;
        return (
            <div>
                <input type="button" onClick={this.changeValue(data)} />
            </div>
        );
    }
}
export default App;

Answer 15

有 3 种方法可以解决这个问题：-

将构造函数中的方法绑定为：-

export class HeaderRows extends Component {
   constructor() {
       super();
       this.handleSort = this.handleSort.bind(this);
   }
}

创建时使用箭头函数:-

handleSort = () => {
    // some text here
}

第三种方式是这样的:-

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

Answer 16

如果你使用 ES6.

就可以简单地做到这一点

export default class Container extends Component {
  state = {
    data: [
        // ...
    ]
  }

  handleItemChange = (e, data) => {
      // here the data is available 
      // ....
  }
  render () {
     return (
        <div>
        {
           this.state.data.map((item, index) => (
              <div key={index}>
                  <Input onChange={(event) => this.handItemChange(event, 
                         item)} value={item.value}/>
              </div>
           ))
        }
        </div>
     );
   }
 }

Answer 17

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

这里是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 中工作。

Answer 18

下面是在 onClick 事件上传递值的示例。

我用的是es6语法。请记住 class 组件箭头函数不会自动绑定，因此在构造函数中显式绑定。

class HeaderRows extends React.Component {

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

    handleSort(value) {
        console.log(value);
    }

    render() {
        return(
            <tr>
                {this.props.defaultColumns.map( (column, index) =>
                    <th value={ column } 
                        key={ index } 
                        onClick={ () => this.handleSort(event.target.value) }>
                        { column }
                    </th>
                )}

                {this.props.externalColumns.map((column, index)  =>
                    <th value ={ column[0] }
                        key={ index }>
                        {column[0]}
                    </th>
                )}
            </tr>
         );
    }
}

Answer 19

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

Answer 20

1. You just have to use an arrow function in the Onclick event like this: 

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

2.Then bind this in the constructor method:
    this.handleSort = this.handleSort.bind(this);

3.And finally get the value in the function:
  handleSort(theValue){
     console.log(theValue);
}

Answer 21

有一个非常简单的方法。

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

Answer 22

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

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

    ...

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

我想您也可以使用 data- 属性。

简单、语义。

Answer 23

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

Answer 24

您可以像这样使用您的代码：

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

这里的 e 是事件对象，如果你想在你的句柄函数中使用像 preventDefault() 这样的事件方法，或者想得到像 e.target.name.

这样的目标值或名称

Answer 25

有几种方法可以在事件处理程序中传递参数，下面是一些方法。

您可以使用箭头函数环绕事件处理程序并传递参数：

<button onClick={() => this.handleClick(id)} />

以上示例等同于调用 .bind 或者您可以显式调用 bind.

<button onClick={this.handleClick.bind(this, id)} />

除了这两种方法，您还可以将参数传递给定义为 curry 函数的函数。

handleClick = (id) => () => {
    console.log("Hello, your ticket number is", id)
};

<button onClick={this.handleClick(id)} />

Answer 26

这个问题不知从何而来，但我认为 .bind 可以解决问题。在下面找到示例代码。

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

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

Answer 27

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

事实上，我只需要一个。
我将处理程序设置在 table 级别（或 UL 或 OL...），当点击发生时，我可以使用事件对象中可用的数据来判断哪个是被点击的单元格：

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

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

这样我就不需要将单元格的数据传递给处理程序，它可以自助服务。
如果我需要更多的数据，不显示的数据，我可以使用数据集属性，或者隐藏元素。
通过一些简单的 DOM 导航，一切都触手可及。
这在 HTML 中一直被使用，因为 PC 更容易陷入困境。

Answer 28

需要进行简单更改：

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

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

Answer 29

像这样简单地创建一个函数

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

然后在需要的地方调用

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

Answer 30

你只需要使用箭头函数来传递值。

<button onClick={() => this.props.onClickHandle("Whosebug")}>

一定要使用()=>，否则会在没有点击事件的情况下调用点击方法。

注意： 崩溃检查默认方法

请在 codesandbox 中找到以下运行代码。

React pass value with method

Answer 31

使用闭包，它产生了一个干净的解决方案：

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

handleSort 函数将 return 一个已经设置了值 column 的函数。

handleSort: function(value) { 
    return () => {
        console.log(value);
    }
}

当用户点击第 th 次时，将使用正确的值调用匿名函数。

示例：https://stackblitz.com/edit/react-pass-parameters-example

Answer 32

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

您可以将一个函数传递给 useCallback 的 return，然后您可以通过将参数传递给它来在渲染中正常调用您的函数。奇迹般有效！只需确保正确设置 useCallback 的依赖项数组即可。

React 的最佳解决方案 >= 16

我发现在不使用内联函数的情况下调用 onClick、onChange 等中具有多个参数的函数的最简洁方法是使用 React 16 及更高版本中可用的自定义 data 属性。

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" />
  )
}

以上示例是针对功能组件的，但即使在 class 个组件中，实现也非常相似。

这种方法不会产生不必要的 re-renders，因为您没有使用内联函数，并且避免了与 this.

绑定的麻烦

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

如果您将值作为道具传递给 children 以在 Child 组件的 onClick 中使用，您也可以在那里使用这种方法，而无需创建包装函数。

也适用于 object 数组，在您想要将 id 从 object 传递到 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>
  )
}

Answer 33

使用函数而不是 class 时，实际上相当容易。


    const [breakfastMain, setBreakFastMain] = useState("Breakfast");

const changeBreakfastMain = (e) => {
    setBreakFastMain(e.target.value);
//sometimes "value" won't do it, like for text, etc. In that case you need to 
//write 'e.target/innerHTML'
 }

<ul  onClick={changeBreakfastMain}>
   <li>
"some text here"
   </li>
<li>
"some text here"
   </li>
</ul>

Answer 34

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

onClick={this.handleSort}

Answer 35

我会这样做：

const HeaderRows = props => {
    const handleSort = value => () => {

    }

    return <tr>
        {props.defaultColumns.map((column, i) =>
            <th key={i} onClick={handleSort(column)}>{column}</th>)}
        {props.externalColumns.map((column, i) => {
            // Multi dimension array - 0 is column name
            const externalColumnName = column[0]
            return (<th key={i}>{externalColumnName}</th>)
        })}
    </tr>
}

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

React js onClick can't pass value to method

javascript

reactjs

简单的方法

更好的方式

React Hooks 解决方案 2022

React 的最佳解决方案 >= 16