<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id = "root"></div>
<script type = "text/babel">
class App extends React.Component {
constructor (props){
super(props)
this.state = {
checked: false
}
this.handleClick = this.handleClick.bind(this)
}
render(){
const textStyle = {
color: this.state.checked ? 'blue' : 'red'
}
return <div>
<input
type = "checkbox"
onClick = {this.handleClick}/>
<h1 style = {textStyle}>character</h1>
</div>
}
handleClick (event) {
this.setState({
checked: event.target.checked
})
}
}
const container = document.getElementById('root')
ReactDOM.render(<App/>, container)
</script>
</body>
</html>### Key Features of the `App` Component
- **State Initialization**: Inside the constructor, the component's state is initialized with a property `checked` set to `false`. This state controls the text color of the heading element.
- **Event Binding**: The `handleClick` method, which updates the component's state based on the checkbox's state, is bound to the component instance in the constructor. This ensures that `this` within `handleClick` refers to the component instance, allowing access to `this.setState`.
- **Dynamic Styling**: The `render` method includes logic to determine the text color based on the component's `checked` state. If `checked` is `true`, the text color is set to blue; otherwise, it's set to red.
- **Handling User Input**: The checkbox input's `onClick` handler is set to the `handleClick` method. When the checkbox is clicked, `handleClick` toggles the `checked` state, triggering a re-render with the new text color.
### Correct Usage of Events
While this implementation works, it's more conventional to use the `onChange` event instead of `onClick` for checkboxes. This aligns with React's synthetic event system and ensures that the state change accurately reflects the checkbox's state. Here's the modified input element to use `onChange`:
```
<input
type="checkbox"
onChange={this.handleClick}/>
```
### Summary
This example clearly demonstrates:
- How to manage and update state in response to user inputs in React.
- The use of conditional styling based on component state.
- Binding event handlers in class components to ensure the correct context.
### Best Practices
- **Using `onChange` for Checkboxes**: For form elements like checkboxes, the `onChange` event is more idiomatic and reliable in React to detect state changes.
- **Semantic Naming**: Consider renaming `handleClick` to something more descriptive of its purpose, such as `handleCheckboxChange`, to improve code readability.
This document provides a solid foundation for understanding some of the core concepts in React, including state management, event handling, and conditional rendering, making it a valuable learning resource for beginners in React development.
'개념 > React' 카테고리의 다른 글
| React Component) component property (0) | 2025.01.08 |
|---|---|
| React Component) confirm of propertype to item Component (1) | 2025.01.07 |
| React Component) format output (0) | 2025.01.06 |
| React Component) item Component (0) | 2025.01.05 |
| React Component) react site script (0) | 2025.01.04 |