onClick不能将值传递给方法
我想读取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中将值传递给onClick事件？
回答 35
Stack Overflow用户
发布于 2015-04-22 23:43:29
易道
使用箭头函数：
return (
<th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);这将创建一个新函数，该函数使用右参数调用handleSort。
更好的方法
把它提取到一个子组件中。在呈现调用中使用箭头函数的问题是，它每次都会创建一个新函数，最终导致不必要的重新呈现。
如果创建子组件，则可以传递处理程序并使用支持作为参数，然后只有当道具更改时才会重新呈现(因为处理程序引用现在从未更改)：
子分量
class TableHeader extends Component {
handleClick = () => {
this.props.onHeaderClick(this.props.value);
}
render() {
return (
<th onClick={this.handleClick}>
{this.props.column}
</th>
);
}
}主要部件
{this.props.defaultColumns.map((column) => (
<TableHeader
value={column}
onHeaderClick={this.handleSort}
/>
))}旧易道(ES5)
使用.bind传递所需的参数，这样就可以将函数绑定到组件上下文中：
return (
<th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);Stack Overflow用户
发布于 2017-08-01 22:48:50
这里有很好的答案，我同意@Austin (第二个选项有单独的组件)。
还有一种我喜欢的方式，竞逐。
您可以做的是创建一个函数，该函数接受一个参数(您的参数)，并返回另一个接受另一个参数的函数(本例中是单击事件)。那么你就可以随心所欲地做任何事。
ES5:
handleChange(param) { // param is the argument you passed to the function
return function (e) { // e is the event object that returned
};
}ES6:
handleChange = param => e => {
// param is the argument you passed to the function
// e is the event object that returned
};你可以这样使用它：
<input
type="text"
onChange={this.handleChange(someParam)}
/>以下是这类用法的完整示例：
const someArr = ["A", "B", "C", "D"];
class App extends React.Component {
state = {
valueA: "",
valueB: "some initial value",
valueC: "",
valueD: "blah blah"
};
handleChange = param => e => {
const nextValue = e.target.value;
this.setState({ ["value" + param]: nextValue });
};
render() {
return (
<div>
{someArr.map(obj => {
return (
<div>
<label>
{`input ${obj} `}
</label>
<input
type="text"
value={this.state["value" + obj]}
onChange={this.handleChange(obj)}
/>
<br />
<br />
</div>
);
})}
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
请注意，这种方法并不解决在每个呈现上创建一个新实例的问题。
与其他内联处理程序相比，我更喜欢这种方法，因为在我看来，这一方法更简洁、更易读。
编辑：
正如在下面的注释中所建议的，您可以缓存/回溯函数的结果。
下面是一个简单的实现：
let memo = {};
const someArr = ["A", "B", "C", "D"];
class App extends React.Component {
state = {
valueA: "",
valueB: "some initial value",
valueC: "",
valueD: "blah blah"
};
handleChange = param => {
const handler = e => {
const nextValue = e.target.value;
this.setState({ ["value" + param]: nextValue });
}
if (!memo[param]) {
memo[param] = e => handler(e)
}
return memo[param]
};
render() {
return (
<div>
{someArr.map(obj => {
return (
<div key={obj}>
<label>
{`input ${obj} `}
</label>
<input
type="text"
value={this.state["value" + obj]}
onChange={this.handleChange(obj)}
/>
<br />
<br />
</div>
);
})}
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />
Stack Overflow用户
发布于 2016-03-02 13:42:11
现在，有了ES6，我觉得我们可以使用最新的答案。
return (
<th value={column} onClick={()=>this.handleSort(column)} >{column}</th>
);基本上，(对于任何不知道的)因为onClick期待一个传递给它的函数，bind工作是因为它创建了一个函数的副本。相反，我们可以传递一个箭头函数表达式，该表达式只调用我们想要的函数，并保留this。您不应该需要在React中绑定render方法，但是如果由于某种原因，您在组件方法中丢失了this：
constructor(props) {
super(props);
this.myMethod = this.myMethod.bind(this);
}https://stackoverflow.com/questions/29810914
复制相似问题
腾讯云开发者
