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


当前回答

使用箭头功能:

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

其他回答

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

});

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

有三种方法可以处理此问题:-

将构造函数中的方法绑定为:-导出类HeaderRows扩展组件{构造器(){super();this.handleSort=this.handleSort.bind(this);}}将箭头函数创建为:-手柄端口=()=>{//这里有些文字}第三种方式是:-<th value={column}onClick={()=>that.handleSort}>{column}</th>

我会这样做:

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

交替尝试回答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)} />