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


当前回答

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

其他回答

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

完整代码如下:

类MyGrid扩展了React.Component{//实际上,我是从Redux中connect设置的道具中得到的状态={列表:[{id:1,姓名:“Mike”},{id:2,名称:“Bob”},{id:3,名称:“弗雷德”}],selectedItemId:3}渲染(){const{list,selectedItemId}=this.stateconst{handleClickRow}=此返回(<表><tbodyonClick={handleClickRow}>{list.map(listItem=>(<tr key={listItem.id}data id={listItem.id{className={selectedItemId==listItem.i?“selected”:“”}><td>{listItem.id}</td><td>{listItem.name}</td></tr>))}</tbody></table>)}handleClickRow=(ev)=>{常量目标=ev.target//您可以使用您想要查找的带有ID的TR,我使用jQueryconst数据集=$(target)最近('tr').data()if(!dataset||!dataset.id)返回this.setState({selectedItemId:+dataset.id})alert(dataset.id)//玩得开心!}}ReactDOM.render(<MyGrid/>,document.getElementById(“ReactDOM”))表{边界塌陷:塌陷;}.选定td{背景色: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>

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

onClick={this.handleSort}

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

使用箭头功能:

您必须安装阶段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; 
class extends React.Component {
    onClickDiv = (column) => {
        // do stuff
    }
    render() {
        return <div onClick={() => this.onClickDiv('123')} />
    }
}