PROSAGA码农传奇-react-React js onClick无法将值传递给方法

19 条回复

0#
回复此人
google你他吗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> 1. You just have to use an arrow function in the Onclick event like this: <th value={column} onClick={() => that.handleSort(theValue)} >{column}</th> 2.Then bind this in the constructor method: this.handleSort = this.handleSort.bind(this); 3.And finally get the value in the function: handleSort(theValue){ console.log(theValue); } </code> </pre> </DIV>

编辑
1#
回复此人
啊这回彻底死了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> class extends React.Component { onClickDiv = (column) => { // do stuff } render() { return <div onClick={() => this.onClickDiv('123')} /> } } </code> </pre> </DIV>

编辑
2#
回复此人
Fire ming | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Theres是一个非常简单的方法。 </p> <pre> <code> onClick={this.toggleStart('xyz')} . toggleStart= (data) => (e) =>{ console.log('value is'+data); } </code> </pre> </DIV>

编辑
3#
回复此人
银角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 还有一个不涉及的选择 <code> .bind </code> 或者ES6将使用带有处理程序的子组件来调用具有必要props的父处理程序。这是一个例子（以下是工作示例的链接）： </p> <pre> <code> var HeaderRows = React.createClass({ handleSort: function(value) { console.log(value); }, render: function () { var that = this; return( <tr> {this.props.defaultColumns.map(function (column) { return ( <TableHeader value={column} onClick={that.handleSort} > {column} </TableHeader> ); })} {this.props.externalColumns.map(function (column) { // Multi dimension array - 0 is column name var externalColumnName = column[0]; return ( <th>{externalColumnName}</th> ); })} </tr>); ) } }); // A child component to pass the props back to the parent handler var TableHeader = React.createClass({ propTypes: { value: React.PropTypes.string, onClick: React.PropTypes.func }, render: function () { return ( <th value={this.props.value} onClick={this._handleClick} {this.props.children} </th> ) }, _handleClick: function () { if (this.props.onClick) { this.props.onClick(this.props.value); } } }); </code> </pre> <P> 基本思想是父组件传递 <code> onClick </code> 函数到子组件。子组件调用 <code> onClick </code> 功能，可以访问任何 <code> props </code> 传递给它（和 <code> event </code> ），允许你使用任何 <code> event </code> 父母的价值或其他道具 <code> onClick </code> 功能。 </p> <P> 这是一个 <a href="https://codepen.io/brettdewoody/pen/XdLVOO" rel="nofollow"> CodePen演示 </A> 显示此方法的实际效果。 </p> </DIV>

编辑
4#
回复此人
谦逊的毛巾 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用箭头功能： </p> <P> 您必须安装stage-2： </p> <P> npm install babel-preset-stage-2： </p> <pre> <code> 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; </code> </pre> </DIV>

编辑
5#
回复此人
天线宝宝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 通过将count作为参数从主组件传递到子组件来实现对象的显示总计数，如下所述。 </p> <P> 这是MainComponent.js </p> <pre> <code> import React, { Component } from "react"; import SubComp from "./subcomponent"; class App extends Component { getTotalCount = (count) => { this.setState({ total: this.state.total + count }) }; state = { total: 0 }; render() { const someData = [ { name: "one", count: 200 }, { name: "two", count: 100 }, { name: "three", count: 50 } ]; return ( <div className="App"> {someData.map((nameAndCount, i) => { return ( <SubComp getTotal={this.getTotalCount} name={nameAndCount.name} count={nameAndCount.count} key={i} /> ); })} <h1>Total Count: {this.state.total}</h1> </div> ); } } export default App; </code> </pre> <P> 这是 <code> SubComp.js </code> </p> <pre> <code> import React, { Component } from 'react'; export default class SubComp extends Component { calculateTotal = () =>{ this.props.getTotal(this.props.count); } render() { return ( <div> <p onClick={this.calculateTotal}> Name: {this.props.name} || Count: {this.props.count}</p> </div> ) } }; </code> </pre> <P> 尝试在上面实现，你会得到一个确切的场景，即如何在任何DOM方法的reactjs中传递参数。 </p> </DIV>

编辑
6#
回复此人
遇见你 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我意识到派对已经很晚了，但我认为一个更简单的解决方案可以满足很多用例： </p> <pre> <code> handleFunction(event) { let value = event.target.value; } ... <button value={post.id} onClick={this.handleEdit} >Edit</button> </code> </pre> <P> 我猜你也可以使用 <code> data- </code> 属性。 </p> <P> 简单，语义。 </p> </DIV>

编辑
7#
回复此人
SHOU宅大可爱 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 下面是在onClick事件上传递值的示例。 </p> <P> 我使用了es6语法。记得在类组件中箭头函数没有自动绑定，所以在构造函数中显式绑定。 </p> <pre> <code> 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> ); } } </code> </pre> </DIV>

编辑
8#
回复此人
求赞有赞必回 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在这种情况下，我会建议curry over bind。喜欢， </p> <pre> <code> return ( <th value={column} onClick={this.handleSort.curry(column)} {column}</th> ); </code> </pre> </DIV>

编辑
9#
回复此人
疯子哥哥 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我在JSX onClick事件上有以下3个建议 - </p> <OL> <LI> <P> 实际上，我们不需要在代码中使用.bind（）或Arrow函数。您可以在代码中使用它。 </p> </LI> <LI> <P> 您还可以将onClick事件从th（或ul）移至tr（或li）以提高性能。基本上，你的n li元素将有n个“事件监听器”。 </p> <pre> <code> So finally code will look like this: <ul onClick={this.onItemClick}> {this.props.items.map(item => <li key={item.id} data-itemid={item.id}> ... </li> )} </ul> </code> </pre> <P> //你可以访问 <code> item.id </code> 在 <code> onItemClick </code> 方法如下图所示： </p> <pre> <code> onItemClick = (event) => { console.log(e.target.getAttribute("item.id")); } </code> </pre> </LI> <LI> <P> 我同意上面提到的为ListItem和List创建单独的React组件的方法。这使代码看起来不错，但是如果你有1000个li，那么将创建1000个事件监听器。请确保您不应该有太多的事件监听器。 </p> <pre> <code> import React from "react"; import ListItem from "./ListItem"; export default class List extends React.Component { /** * This List react component is generic component which take props as list of items and also provide onlick * callback name handleItemClick * @param {String} item - item object passed to caller */ handleItemClick = (item) => { if (this.props.onItemClick) { this.props.onItemClick(item); } } /** * render method will take list of items as a props and include ListItem component * @returns {string} - return the list of items */ render() { return ( <div> {this.props.items.map(item => <ListItem key={item.id} item={item} onItemClick={this.handleItemClick}/> )} </div> ); } } import React from "react"; export default class ListItem extends React.Component { /** * This List react component is generic component which take props as item and also provide onlick * callback name handleItemClick * @param {String} item - item object passed to caller */ handleItemClick = () => { if (this.props.item && this.props.onItemClick) { this.props.onItemClick(this.props.item); } } /** * render method will take item as a props and print in li * @returns {string} - return the list of items */ render() { return ( <li key={this.props.item.id} onClick={this.handleItemClick}>{this.props.item.text}</li> ); } } </code> </pre> </LI> </醇> </DIV>

编辑
10#
回复此人
浮华丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是我的方法，不确定它有多糟糕，请评论 </p> <P> 在可点击元素中 </p> <pre> <code> return ( <th value={column} onClick={that.handleSort} data-column={column}> {column}</th> ); </code> </pre> <P> 然后 </p> <pre> <code> handleSort(e){ this.sortOn(e.currentTarget.getAttribute('data-column')); } </code> </pre> </DIV>

编辑
11#
回复此人
银环蛇 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有三种方法可以解决这个问题： - </p> <OL> <LI> <P> 将构造函数中的方法绑定为： - </p> <pre> <code> export class HeaderRows extends Component { constructor() { super(); this.handleSort = this.handleSort.bind(this); } } </code> </pre> </LI> <LI> <P> 创建时使用箭头功能： - </p> <pre> <code> handleSort = () => { // some text here } </code> </pre> </LI> <LI> <P> 第三种方式是： - </p> <pre> <code> <th value={column} onClick={() => that.handleSort} >{column}</th> </code> </pre> </LI> </醇> </DIV>

编辑
12#
回复此人
=_= | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我猜你必须将方法绑定到React的类实例。使用构造函数绑定React中的所有方法更安全。在您将参数传递给方法的情况下，第一个参数用于绑定方法的“他的”上下文，因此您无法访问方法内的值。 </p> </DIV>

编辑
13#
回复此人
浮华丶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果您正在使用，您可以简单地执行此操作 <code> ES6 </code> 。 </p> <pre> <code> export default class Container extends Component { state = { data: [ // ... ] } handleItemChange = (e, data) => { // here the data is available // .... } render () { return ( <div> { this.state.data.map((item, index) => ( <div key={index}> <Input onChange={(event) => this.handItemChange(event, item)} value={item.value}/> </div> )) } </div> ); } } </code> </pre> </DIV>

编辑
14#
回复此人
啦啦啦拉肚子 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我认为， <code> .bind(this, arg1, arg2, ...) </code> 在React的地图中 - 是错误的代码，因为它很慢！ 10-50 <code> .bind(this) </code> 在单一渲染方法 - 非常慢的代码。 <BR/> 我修复它像这样： <BR/> <EM> 渲染方法 </EM> <BR/> <code> <tbody onClick={this.handleClickRow}> </code> <BR/> 的地图 <code> <tr data-id={listItem.id}> </code> <BR/> <EM> 处理器 </EM> <BR/> <code> var id = $(ev.target).closest('tr').data().id </code> </p> <P> 完整代码如下： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“true”data-console =“true”data-babel =“true”> <div class =“snippet-code snippet-Currently-hidden”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> class MyGrid extends React.Component { // In real, I get this from props setted by connect in Redux state = { list: [ {id:1, name:'Mike'}, {id:2, name:'Bob'}, {id:3, name:'Fred'} ], selectedItemId: 3 } render () { const { list, selectedItemId } = this.state const { handleClickRow } = this return ( <table> <tbody onClick={handleClickRow}> {list.map(listItem =>( <tr key={listItem.id} data-id={listItem.id} className={selectedItemId===listItem.id ? 'selected' : ''}> <td>{listItem.id}</td> <td>{listItem.name}</td> </tr> ))} </tbody> </table> ) } handleClickRow = (ev) => { const target = ev.target // You can use what you want to find TR with ID, I use jQuery const dataset = $(target).closest('tr').data() if (!dataset || !dataset.id) return this.setState({selectedItemId:+dataset.id}) alert(dataset.id) // Have fun! } } ReactDOM.render(<MyGrid/>, document.getElementById("react-dom")) </code> </pre> <pre class="snippet-code-css lang-css prettyprint-override"> <code> table { border-collapse: collapse; } .selected td { background-color: rgba(0, 0, 255, 0.3); } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <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> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
15#
回复此人
阿政ღ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 交替尝试回答OP的问题，包括e.preventDefault（）调用： </p> <P> 渲染链接（的<strong> ES6 </强> ） </p> <pre> <code> <a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}> </code> </pre> <P> 组件功能 </p> <pre> <code> handleSort = (e, param) => { e.preventDefault(); console.log('Sorting by: ' + param) } </code> </pre> </DIV>

编辑
16#
回复此人
℘ 宋唐 ℒº ѵ ℯ楚厦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我发现传递param作为标签属性的解决方案非常合理。 </p> <P> 但是它有局限性： </p> <UL> <LI> 列表项具有其他标记时无法正常工作（因此event.target可能与预期不同） </LI> <LI> Param可能只是一个字符串。需要序列化和反序列化。 </LI> </UL> <P> 这就是我想出这个库的原因： <a href="https://github.com/sneas/react-event-param" rel="nofollow noreferrer"> https://github.com/sneas/react-event-param </A> </p> <P> 它： </p> <UL> <LI> 通过在需要时在父母中搜索所需属性来解决孩子的问题 </LI> <LI> 自动序列化和反序列化param </LI> <LI> 封装设置和获取的逻辑。不需要乱用param名字 </LI> </UL> <P> 用法示例： </p> <pre class="lang-js prettyprint-override"> <code> import { setEventParam, getEventParam } from "react-event-param"; class List extends Component { onItemClick = e => { const index = getEventParam(e.target); // Do something with index }; render() { return ( <ul> {this.props.items.map((itemText, index) => ( <li key={index} {...setEventParam(index)} onClick={this.onItemClick} > {{ itemText }} </li> ))} </ul> ); } } export default List; </code> </pre> </DIV>

编辑
17#
回复此人
ikun | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> 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> ); } } </code> </pre> </DIV>

编辑

登录后才能参与评论