React js onClick은 메서드에 값을 전달할 수 없습니다.
onClick 이벤트 값 속성을 읽습니다.그러나 클릭하면 콘솔에 다음과 같은 내용이 표시됩니다.
SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target
코드는 올바르게 동작하고 있습니다. 보면 알 수 요.{column} 이벤트에서는수 을 클릭합니다.
마이코드:
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>
);
}
});
값을 「」에 할 수 ?onClick리액트 js?
간단한 방법
화살표 기능 사용:
return (
<th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);
새 됩니다.handleSort적절한 매개 변수와 함께.
Better Way(더 나은 방법)
서브 컴포넌트로 추출합니다.렌더링 콜에서 화살표 함수를 사용할 때의 문제는 매번 새로운 함수를 생성하여 불필요한 재렌더가 발생한다는 것입니다.
하위 구성요소를 작성할 경우 핸들러를 전달하고 소품을 인수로 사용할 수 있습니다. 이 경우 핸들러 참조가 변경되지 않으므로 소품이 변경될 때만 다시 렌더링됩니다.
서브 컴포넌트
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}
/>
))}
구식 Easy Way (ES5)
원하는 매개 변수를 전달하기 위해 사용합니다. 이렇게 하면 Component 컨텍스트와 함수를 바인딩할 수 있습니다.
return (
<th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);
여기에도 좋은 답변이 있습니다.@Austin Grego(오스트린 그레고).
제가 좋아하는 또 다른 방법이 있어요, 카레링입니다.
하면 할 수 요.원하는 대로 할 수 있어요
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" />요즘은 ES6를 통해 최신 답변을 얻을 수 있을 것 같습니다.
return (
<th value={column} onClick={()=>this.handleSort(column)} >{column}</th>
);
basically basically모 （ 사모모 basically basically basically basically basically ）이래onClick '함수'를 하고 있습니다.bind는 함수의 복사본을 생성하기 때문에 작동합니다.하고, 함수를 보존하는 할 수 .this.render리액트에서의 메서드입니다만, 어떤 이유로든,this다음 컴포넌트 방법 중 하나로 설정합니다.
constructor(props) {
super(props);
this.myMethod = this.myMethod.bind(this);
}
[[h/t ~@E ]댓글로 연결해주는 선딘이]
answer( 바인딩 top (「」, 「」)에 의해 생성된 .map()★★★★★★ 。
ESLint-plugin-react에서 최적의 방법을 설명합니다.
아이템 리스트
렌더에서 바인드의 일반적인 사용 예는 목록을 렌더링할 때 목록 항목별로 별도의 콜백을 갖는 것입니다.
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>
);
});
이렇게 하면 모든 렌더링에 대해 (바인드 호출을 통해) 새로운 함수를 만들 필요가 없으므로 렌더링 속도가 향상됩니다.
이것이 저의 접근법입니다.얼마나 나쁜지는 모르겠지만, 코멘트 부탁드립니다.
클릭 가능한 요소
return (
<th value={column} onClick={that.handleSort} data-column={column}> {column}</th>
);
그리고 나서.
handleSort(e){
this.sortOn(e.currentTarget.getAttribute('data-column'));
}
이 예는 당신의 예와 조금 다를 수 있습니다. 하지만 이것이 당신이 이 문제에 대해 가질 수 있는 최선의 해결책이라고 장담할 수 있습니다.퍼포먼스에 문제가 없는 솔루션을 며칠째 찾고 있습니다.드디어 이걸 생각해 냈어요.
class HtmlComponent extends React.Component {
constructor() {
super();
this.state={
name:'MrRehman',
};
this.handleClick= this.handleClick.bind(this);
}
handleClick(event) {
const { param } = e.target.dataset;
console.log(param);
//do what you want to do with the parameter
}
render() {
return (
<div>
<h3 data-param="value what you wanted to pass" onClick={this.handleClick}>
{this.state.name}
</h3>
</div>
);
}
}
갱신하다
이렇게 하면 됩니다.JSON.stringify(object)문자열로 변환하고 데이터 세트에 추가합니다.
return (
<div>
<h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
{this.state.name}
</h3>
</div>
);
리액트 훅 솔루션 2022
const arr = [
{ id: 1, txt: 'One' },
{ id: 2, txt: 'Two' },
{ id: 3, txt: 'Three' },
]
const App = () => {
const handleClick = useCallback(
(id) => () => {
console.log("ID: ", id)
},
[],
)
return (
<div>
{arr.map((item) => (
<button onClick={handleClick(item.id)}>{item.txt}</button>
))}
</div>
)
}
함수를 useCallback의 반환에 전달하고, 그 다음 함수를 전달함으로써 렌더 내의 함수를 정상적으로 호출할 수 있습니다.마법처럼 작동!useCallback의 의존관계 배열을 적절히 설정하기만 하면 됩니다.
React > = 16을 사용한 최고의 솔루션
등의 여러 onClick, onChange를 입니다.data16번 반응하세요.
const App = () => {
const onClick = (e) => {
const value1 = e.currentTarget.getAttribute("data-value1")
const value2 = e.currentTarget.getAttribute("data-value2")
const value2 = e.currentTarget.getAttribute("data-value2")
console.log("Values1", value1)
console.log("Values2", value2)
console.log("Values3", value3)
}
return (
<button onClick={onClick} data-value1="a" data-value2="b" data-value3="c" />
)
}
위의 예는 기능 컴포넌트에 대한 것이지만 구현은 클래스 컴포넌트에서도 거의 유사합니다.
함수를 하지 않기 에 불필요한 인트라넷 함수를 사용하지 않기 때문에 로 수 .this.
함수에서 사용할 수 있는 만큼의 값을 전달할 수 있습니다.
Child Component's onClick에서 사용할 값을 자녀에게 전달하는 경우 래퍼 기능을 만들지 않고도 이 방법을 사용할 수 있습니다.
합니다.onClick（ ( ( ( ( ( ( ）
const App = () => {
const [arrState, setArrState] = useState(arr)
const deleteContent = (e) => {
const id = e.currentTarget.getAttribute("data-id")
const tempArr = [...arrState]
const filteredArr = tempArr.filter((item) => item.id !== id)
setArrState(filteredArr)
}
return (
<div>
{arrState.map((item) => (
<React.Fragment key={item.id}>
<p>{item.content}</p>
<button onClick={deleteContent} data-id={item.id}>
Delete
</button>
</React.Fragment>
))}
</div>
)
}
간단히 이런 기능을 만들 수 있습니다.
function methodName(params) {
//the thing you wanna do
}
필요한 곳에 전화를 걸어
<Icon onClick = {() => { methodName(theParamsYouwantToPass);} }/>
class extends React.Component {
onClickDiv = (column) => {
// do stuff
}
render() {
return <div onClick={() => this.onClickDiv('123')} />
}
}
파티에 늦었다는 것은 알지만, 훨씬 더 간단한 솔루션으로 많은 사용 사례를 충족할 수 있을 것 같습니다.
handleEdit(event) {
let value = event.target.value;
}
...
<button
value={post.id}
onClick={this.handleEdit} >Edit</button>
도 ' 좋다'라는 을 쓸 수 것 요.data-여하하다
심플하고 의미심장합니다.
e.prevent Default() 호출을 포함한 OP 질문에 대한 응답을 시도합니다.
렌더링된 링크(ES6)
<a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}>
컴포넌트 기능
handleSort = (e, param) => {
e.preventDefault();
console.log('Sorting by: ' + param)
}
이 더 , 이 에는 「」( 「」)이 옵션에는 「」이 포함되어 있지 않습니다..bind또는 ES6는 핸들러와 함께 하위 컴포넌트를 사용하여 필요한 소품을 사용하여 부모 핸들러를 호출합니다.다음은 예를 제시하겠습니다(작업 예에 대한 링크는 다음과 같습니다).
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);
}
}
});
은 부모 입니다.onClick이치노가 " " 를 합니다.onClick하며 임의의 접근 .props (그것)에되었습니다.event） 、 [ ] 、 [ ] 、 [ ] 、 [ ] 、 [ ]의 임의의 것을 할 수 .eventonClick★★★★★★ 。
다음은 이 방법을 보여주는 CodePen 데모입니다.
간단하게 할 수 요.ES6.
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>
);
}
}
구현은 아래에 설명된 대로 카운트를 주 구성 요소에서 하위 구성 요소로 전달하여 개체에서 총 카운트를 표시합니다.
Main Component.js는 다음과 같습니다.
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;
여기 ★★★★★★★★★★★★★★★★★★★★★★★.SubComp.js
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>
)
}
};
상기의 실장을 시도하면 패스 파라미터가 임의의 DOM 메서드에서 reactjs로 동작하는 정확한 시나리오를 얻을 수 있습니다.
이벤트 핸들러에서 파라미터를 전달하는 방법에는 다음과 같은 몇 가지가 있습니다.
화살표 기능을 사용하여 이벤트핸들러를 감싸고 파라미터를 전달할 수 있습니다.
<button onClick={() => this.handleClick(id)} />
는 콜링에 합니다..bind또는 명시적으로 바인드를 호출할 수 있습니다.
<button onClick={this.handleClick.bind(this, id)} />
이러한 두 가지 접근법 외에도 카레 함수로 정의된 함수에 인수를 전달할 수도 있습니다.
handleClick = (id) => () => {
console.log("Hello, your ticket number is", id)
};
<button onClick={this.handleClick(id)} />
이 용도로 재사용할 수 있는 래퍼 컴포넌트를 작성했습니다.이 컴포넌트는, 여기에 기재되어 있는 회답에 근거하고 있습니다.그러나 문자열을 전달하기만 하면 되는 경우 데이터 속성을 추가하고 e.target.dataset에서 읽습니다(다른 일부 제안처럼).기본적으로 내 래퍼는 함수인 모든 소품에 바인딩되어 'on'으로 시작하고 다른 모든 이벤트 인수 후에 자동으로 데이터 소품을 호출자에게 전달합니다.성능 테스트는 하지 않았지만 직접 클래스를 만들지 않아도 되며 다음과 같이 사용할 수 있습니다.
const DataButton = withData('button')
const DataInput = withData('input');
또는 컴포넌트 및 기능의 경우
const DataInput = withData(SomeComponent);
또는 당신이 원한다면
const DataButton = withData(<button/>)
컨테이너 외부(수입품 근처)를 선언합니다.
컨테이너에서의 사용법은 다음과 같습니다.
import withData from './withData';
const DataInput = withData('input');
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}>
<DataInput data={item} onChange={this.handleItemChange} value={item.value}/>
</div>
))
}
</div>
);
}
}
다음은 래퍼 코드 'withData.js:
import React, { Component } from 'react';
const defaultOptions = {
events: undefined,
}
export default (Target, options) => {
Target = React.isValidElement(Target) ? Target.type : Target;
options = { ...defaultOptions, ...options }
class WithData extends Component {
constructor(props, context){
super(props, context);
this.handlers = getHandlers(options.events, this);
}
render() {
const { data, children, ...props } = this.props;
return <Target {...props} {...this.handlers} >{children}</Target>;
}
static displayName = `withData(${Target.displayName || Target.name || 'Component'})`
}
return WithData;
}
function getHandlers(events, thisContext) {
if(!events)
events = Object.keys(thisContext.props).filter(prop => prop.startsWith('on') && typeof thisContext.props[prop] === 'function')
else if (typeof events === 'string')
events = [events];
return events.reduce((result, eventType) => {
result[eventType] = (...args) => thisContext.props[eventType](...args, thisContext.props.data);
return result;
}, {});
}
JSX onClick Events에 대해 아래에 3가지 제안이 있습니다.
사실 코드에 .bind()나 Arrow 함수를 사용할 필요는 없습니다.코드로 간단하게 사용할 수 있습니다.
onClick 이벤트를 th(또는 ul)에서 tr(또는 li)로 이동하여 성능을 향상시킬 수도 있습니다.기본적으로 nli 요소에 대해 n개의 "이벤트 리스너"가 있습니다.
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>// 할 수 // 에 액세스 할 수 있습니다.
item.idonItemClick방법:onItemClick = (event) => { console.log(e.target.getAttribute("item.id")); }ListItem과 List에 대해 별도의 React Component를 작성하기 위해 위에서 언급한 접근법에 동의합니다.이 make 코드는 좋아 보이지만 1000li가 있는 경우 1000개의 이벤트 청취자가 생성됩니다.이벤트 청취자가 많지 않도록 주의해 주세요.
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> ); } }
두 가지 방법으로 온클릭 이벤트 값을 메서드에 전달하기 위한 코드를 추가했습니다. 1. 바인드 메서드 2. 화살표(=>) 메서드를 사용합니다.handsort1 및 handsort 메서드를 참조하십시오.
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>);
}
});
다음은 onClick 이벤트에 값을 전달하는 예입니다.
es6 구문을 사용했습니다.클래스에서는 컴포넌트 화살표 함수가 자동으로 바인딩되지 않으므로 컨스트럭터에서 명시적으로 바인딩됩니다.
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>
);
}
}
메서드를 React 클래스 인스턴스에 바인딩해야 할 것 같습니다.생성자를 사용하여 React의 모든 메서드를 바인딩하는 것이 더 안전합니다.메서드에 매개 변수를 전달하면 첫 번째 매개 변수가 메서드의 'this' 컨텍스트를 바인딩하는 데 사용되므로 메서드 내부의 값에 액세스할 수 없습니다.
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);
}
화살표 기능 사용:
스테이지 2를 인스톨 할 필요가 있습니다.
npm install babel-syslog-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;
아주 쉬운 방법이죠
onClick={this.toggleStart('xyz')} .
toggleStart= (data) => (e) =>{
console.log('value is'+data);
}
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>
);
}
}
난데없이 이런 질문을 던지긴 했지만.bind코드를 .아래 샘플 코드를 찾습니다.
const handleClick = (data) => {
console.log(data)
}
<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>
이 문제에는 3가지 방법이 있습니다.-
생성자의 메서드를 :-로 바인드합니다.
export class HeaderRows extends Component { constructor() { super(); this.handleSort = this.handleSort.bind(this); } }화살표 기능을 사용하여 :- 로 만듭니다.
handleSort = () => { // some text here }세 번째 방법은 다음과 같습니다.
<th value={column} onClick={() => that.handleSort} >{column}</th>
코드를 다음과 같이 사용할 수 있습니다.
<th value={column} onClick={(e) => that.handleSort(e, column)} >{column}</th>
오브젝트에 는 event와 같은 하고 싶은 .preventDefault() '' '타깃값'과 같은 .e.target.name.
퍼포먼스에 대한 많은 고려가 있었지만, 모두 공백 상태였습니다.
이 핸들러의 문제는 이름을 붙일 수 없는 주장을 소품 안에 넣기 위해 그들을 카레로 만들 필요가 있다는 것입니다.
, 각 합니다.몇 개의 버튼은 문제가 되지 않는다는 것에 동의합시다.
이 문제는 수십 개의 열과 수천 개의 행이 있는 표 형식의 데이터를 처리할 때 발생합니다.그 만큼 많은 핸들러를 작성했을 경우의 영향을 알 수 있습니다.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★.
UL OL하고, 오브젝트에서 지금까지 하여 어느 된 셀인지 알 수 .「 」 （ ul UL 또 OL ... ） 。
nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent
를 들어 THS ot tagname은 클릭을 무시합니다.발밑에 있다.
및 셀의 합니다.rowIndex " cellIndex "는 클릭된 셀의 정확한 위치를 제공합니다.
텍스트 콘텐츠는 클릭된 셀의 텍스트입니다.
이렇게 하면 셀의 데이터를 핸들러에게 전달할 필요가 없습니다.셀프 서비스가 가능하기 때문입니다.
데이터가 더 필요하거나 표시되지 않는 데이터가 필요한 경우 데이터 집합 속성이나 숨겨진 요소를 사용할 수 있습니다.
간단한 DOM 내비게이션으로 모든 것을 이용할 수 있습니다.
PC의 HTML을 사용합니다.
클래스가 아닌 함수로 작업할 경우 실제로 매우 쉽습니다.
const [breakfastMain, setBreakFastMain] = useState("Breakfast");
const changeBreakfastMain = (e) => {
setBreakFastMain(e.target.value);
//sometimes "value" won't do it, like for text, etc. In that case you need to
//write 'e.target/innerHTML'
}
<ul onClick={changeBreakfastMain}>
<li>
"some text here"
</li>
<li>
"some text here"
</li>
</ul>
저는 이렇게 하겠습니다.
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>
}
언급URL : https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method
'source' 카테고리의 다른 글
| JavaScript에서 두 변수를 스왑하는 방법 (0) | 2022.10.13 |
|---|---|
| PHP: bool vs boolean type 힌트 (0) | 2022.10.13 |
| X분마다 cronjob을 실행하는 방법 (0) | 2022.10.13 |
| 연결 없이 자바스크립트에서 변수를 문자열로 보간하려면 어떻게 해야 합니까? (0) | 2022.10.13 |
| 필드 'id'에 기본값이 없습니다. (0) | 2022.10.13 |