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


当前回答

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

});

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

其他回答

我认为,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>

使用箭头功能:

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

});

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

我通过两种方式向方法添加了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>);
    }
});
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>
    );
  }
}