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

当前回答

需要简单更改：

使用＜th value＝｛column｝onClick＝｛that.handleSort｝＞｛column｝</th＞

而不是＜th value＝｛column｝onClick＝｛that.handleSort｝＞｛column｝</th＞

2020-01-16 12:25:48

其他回答

使用箭头功能：

您必须安装阶段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;

2018-01-10 12:30:52

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

2016-03-29 10:58:03

如今，有了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

需要简单更改：

使用＜th value＝｛column｝onClick＝｛that.handleSort｝＞｛column｝</th＞

而不是＜th value＝｛column｝onClick＝｛that.handleSort｝＞｛column｝</th＞

2020-01-16 12:25:48

这里有很好的答案，我同意@Austin Greco（第二个选项，有单独的组件）还有一种我喜欢的方式，咖喱。您可以做的是创建一个接受一个参数（您的参数）的函数，并返回另一个接受另一个参数的函数（在本例中是单击事件）。那你就可以随心所欲了。

示例5：

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”]；类应用程序扩展React.Component{状态={值A:“”，valueB：“一些初始值”，值C:“”，值D：“废话”};handleChange=param=>{常量处理程序=e=>{const nextValue=e.target.value；this.setState（｛[“value”+param]：nextValue｝）；}if（！memo[param]）{备忘录[param]=e=>处理程序（e）}返回备忘录[param]};render（）{返回(＜div＞｛someArr.map（obj=>{返回(＜div key＝｛obj｝＞<标签>｛`输入$｛obj｝`｝</label><输入type=“文本”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”/>

2017-08-01 22:48:50

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

推荐文章

最新文章

标签