자식 구성 요소에 2 개의 값을 전달합니다.
- 표시 할 객체 목록
- 기능을 삭제하십시오.
.map () 함수를 사용하여 객체 목록을 표시합니다 (react tutorial 페이지에 제공된 예제와 같이). 그러나 해당 구성 요소의 버튼은 onClick렌더링시 함수를 시작합니다 (렌더링 시간에는 실행되지 않아야 함). 내 코드는 다음과 같습니다
module.exports = React.createClass({
render: function(){
var taskNodes = this.props.todoTasks.map(function(todo){
return (
<div>
{todo.task}
<button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
</div>
);
}, this);
return (
<div className="todo-task-list">
{taskNodes}
</div>
);
}
});내 질문은 : 왜 onClick함수가 렌더에서 발생합니까?
답변
onClick에 함수를 전달하는 대신 해당 함수를 호출하므로 해당 행을 다음과 같이 변경하십시오.
<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>=> ES6에 도입 된 Arrow Function이라고하며 React 0.13.3 이상에서 지원됩니다.
답변
함수를 호출하는 대신 값을 함수에 바인딩하십시오.
this.props.removeTaskFunction.bind(this, todo)MDN 참조 : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
답변
onClick속성 값 은 함수 호출이 아니라 함수 여야합니다.
<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>답변
화살표 함수를 사용하지 않고 더 간단한 것을 사용하는 사람들을 위해 … signOut 함수 뒤에 괄호를 추가 할 때이 문제가 발생했습니다 …
이것을 교체 <a onClick={props.signOut()}>Log Out</a>
이것으로 <a onClick={props.signOut}>Log Out</a>…! ?
답변
JSX는 HTML과 매우 유사하므로 ReactJS와 함께 사용되며 프로그래머는 HTML을 사용하는 느낌을 주지만 궁극적으로는 자바 스크립트 파일로 변환합니다.
for-loop를 작성하고 {this.props.removeTaskFunction (todo)}로 함수를 지정하면 루프가 트리거 될 때마다 함수가 실행됩니다.
이 동작을 중지하려면 함수를 onClick으로 되돌려 야합니다.
fat arrow 함수에는 bind 속성 과 함께 숨겨진 return 문이 있습니다 . 따라서 Javascript도 함수를 반환 할 수 있으므로 함수를 OnClick 으로 반환합니다 !!!!!
사용하다 –
onClick={() => { this.props.removeTaskFunction(todo) }}그 의미는
var onClick = function() {
return this.props.removeTaskFunction(todo);
}.bind(this);답변
JSX는 중괄호로 JavaScript 표현식을 평가합니다
이 경우, this.props.removeTaskFunction(todo)호출되고 리턴 값이onClick
당신이 제공해야 할 onClick것은 기능입니다. 이를 위해 익명 함수로 값을 줄 바꿈 할 수 있습니다.
export const samepleComponent = ({todoTasks, removeTaskFunction}) => {
const taskNodes = todoTasks.map(todo => (
<div>
{todo.task}
<button type="submit" onClick={() => removeTaskFunction(todo)}>Submit</button>
</div>
);
return (
<div className="todo-task-list">
{taskNodes}
</div>
);
}
});답변
비슷한 문제가 있었는데 내 코드는 다음과 같습니다.
function RadioInput(props) {
return (
<div className="form-check form-check-inline">
<input className="form-check-input" type="radio" name="inlineRadioOptions" id={props.id} onClick={props.onClick} value={props.label}></input>
<label className="form-check-label" htmlFor={props.id}>{props.label}</label>
</div>
);
}
class ScheduleType extends React.Component
{
renderRadioInput(id,label)
{
id = "inlineRadio"+id;
return(
<RadioInput
id = {id}
label = {label}
onClick = {this.props.onClick}
/>
);
}그것이 있어야 할 곳
onClick = {() => this.props.onClick()}에서 RenderRadioInput
그것은 나를 위해 문제를 해결했습니다.
