JavaScript
- 4 ответа
- 0 вопросов
3
Вклад в тег
import React, { Component } from 'react';
import Form from './Form';
import Button from './Button';
class App extends Component {
state = {
isChecked: false,
}
handleInputChange = event => {
this.setState({ isChecked: event.target.checked })
}
handleButtonClick = () => {
this.setState({ isChecked: !this.state.isChecked })
}
render() {
return (
<div className="App">
<Form
handleInputChange={this.handleInputChange}
isChecked={this.state.isChecked}
/>
<Button handleButtonClick={this.handleButtonClick}/>
</div>
);
}
}
export default App;import React from 'react';
const Button = ({ handleButtonClick }) => (
<div>
<button onClick={handleButtonClick}>
clickme
</button>
</div>
)
export default Button;import React from 'react';
const Form = ({ isChecked, handleInputChange }) => (
<input
type="checkbox"
checked={isChecked}
onChange={handleInputChange}
/>
)
export default Form;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="product_select_value" style="font-weight:bold">2</div>
<input type="text" id="input">
<script src="index.js"></script>
</body>
</html>// Input for changing target DIV
const input = document.getElementById('input')
input.addEventListener('change', function(e) {
targetNode.innerHTML = e.target.value
})
// Select the node that will be observed for mutations
const targetNode = document.getElementById('product_select_value')
// Callback function to execute when mutations are observed
function callback(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
if(mutation.target.textContent === '1') {
console.log('Hide some data')
} else {
console.log('Show some data')
}
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback)
// Start observing the target node for configured mutations
observer.observe(targetNode, { childList: true })
// Later, you can stop observing
// observer.disconnect()