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


当前回答

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

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

    ...

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

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

简单、语义。

其他回答

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

实际上,我们不需要在代码中使用.bind()或Arrow函数。您可以在代码中简单使用。您还可以将onClick事件从th(或ul)移动到tr(或li)以提高性能。基本上,您的n li元素将有n个“事件侦听器”。所以最后代码将如下所示:<ul onClick={this.onItemClick}>{this.props.items.map(item=><li key={item.id}data itemid={item.id}}>...</li>)}</ul>//您可以在onItemClick方法中访问item.id,如下所示:onItemClick=(事件)=>{console.log(e.target.getAttribute(“item.id”));}我同意上面提到的为ListItem和List创建单独的React组件的方法。然而,如果您有1000个li,那么将创建1000个Event Listener,这使得代码看起来很好。请确保您不应该有太多的事件侦听器。从“React”导入React;从“./ListItem”导入ListItem;导出默认类List扩展React.Component{/***这个List-react组件是一个通用组件,它将道具作为物品列表,并提供onlick*回调名称handleItemClick*@param{String}item-传递给调用者的item对象*/handleItemClick=(项)=>{if(this.props.onItemClick){this.props.onItemClick(项);}}/***render方法将项目列表作为道具,并包含ListItem组件*@returns{string}-返回项目列表*/render(){返回(<div>{this.props.items.map(item=><ListItem key={item.id}item={item}onItemClick={this.handleItemClick}/>)}</div>);}}从“React”导入React;导出默认类ListItem扩展React.Component{/***这个List-react组件是一个通用组件,它将道具作为物品,并提供onlick*回调名称handleItemClick*@param{String}item-传递给调用者的item对象*/handleItemClick=()=>{if(this.props.item&&this.props.onItemClick){this.props.onItem单击(this.props.项);}}/***render方法将项目作为道具,并在li中打印*@returns{string}-返回项目列表*/render(){返回(<li key={this.props.item.id}onClick={this.handleItemClick}>{this.props.item.text}</li>);}}

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

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

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

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

渲染链接(ES6)

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

组件功能

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

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

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

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

上面的示例等效于调用.bind,也可以显式调用bind。

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

除了这两种方法之外,还可以将参数传递给定义为咖喱函数的函数。

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

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

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

我使用了es6语法。记住类内组件箭头函数不会自动绑定,所以在构造函数中显式绑定。

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