export default class App extends React.Component {
constructor() {
super();
this.state = {
todos: 5
};
}
handleClick = () => {
this.setState({ todos: this.state.todos + 1 });
};
render() {
return (
<div className="App">
<h1>ToDo List</h1>
<p>Just keep giving me things to do</p>
<p>I still have {this.state.todos} things to do</p>
<AddTodo todos={this.state.todos} handleClick={this.handleClick} />
</div>
);
}
}
<p>I still have {this.state.todos} things to do</p>하위 구성 요소에서 버튼을 클릭 할 때마다 1 씩 증가하도록 상위에서 업데이트하려고합니다 . 내가 무엇을 놓치고 있습니까? 오류가 발생하지 않지만 작동하지 않습니다.
import React from "react";
export default function AddTodo(handleClick) {
return (
<div className="AddTodo">
<button onClick={() => handleClick}>Add Another</button>
</div>
);
}
Props는 기능적 구성 요소에 전달되는 첫 번째 값이며, 객체이며 여기에서 구조를 해제해야 handleClick합니다.
export default function AddTodo({ handleClick }) {
return (
<div className="AddTodo">
<button onClick={handleClick}>Add Another</button>
</div>
);
}
또한 핸들 클릭 기능을 이렇게 변경하십시오.
handleClick = () => {
this.setState(({ todos }) => ({ todos: todos + 1 }));
};
실제 사례
const AddTodo = ({ onClick }) => (
<div className="AddTodo">
<button onClick={onClick}>Add Another</button>
</div>
);
const App = () => {
const [todos, setTodos] = React.useState(5);
const onClick = () => {
setTodos((oldTodos) => oldTodos + 1);
};
return (
<div className="App">
<h1>ToDo List</h1>
<p>Just keep giving me things to do</p>
<p>I still have {todos} things to do</p>
<AddTodo todos={todos} onClick={onClick} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'))<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<div id="root"></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다