У меня та же ситуация с задачей.
код App.js:
import React from 'react';
import TextUpdater from './TextUpdater.js';
class App extends React.Component {
state = {
currentKey: 1
};
forceRemount = () => {
this.setState({ currentKey: this.state.currentKey + 1 });
};
render() {
return (
<TextUpdater
key={this.state.currentKey}
forceRemount={this.forceRemount}
/>
);
}
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
TextUpdater.js:
import React from 'react';
export const saveData = (text) => {
const payload = {
userId: "100500",
text
};
console.log(payload);
};
export default class TextUpdater extends React.Component {
state = {
text: "initial text"
};
handleChange = ({ target: { value } }) => {
this.setState({ text: value });
};
componentWillUnmount() {
window.removeEventListener('handleChange', console.log);
saveData(this.state.text);
}
render() {
return (
<div>
<h2>Update text</h2>
<textarea value={this.state.text} onChange={this.handleChange} />
<div>
<button onClick={this.props.forceRemount}>Unmount</button>
</div>
</div>
);
}
}
и структура:
ну и обновленный результат проверки (сначала картина была как у топикстартера):
