4.9 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d4036173 | Impostare lo stato con this.setState | 6 | 301412 | set-state-with-this-setstate |
--description--
Le sfide precedenti riguardavano il componente state
e come inizializzare lo stato nel constructor
. C'è anche un modo per cambiare lo state
del componente. React fornisce un metodo per l'aggiornamento dello state
del componente chiamato setState
. Chiamerai il metodo setState
all'interno della classe component in questo modo: this.setState()
, passandogli un oggetto con coppie chiave-valore. Le chiavi sono le proprietà dello stato e i valori sono i dati dello stato aggiornato. Per esempio, se stessimo memorizzando uno username
nello stato e volessimo aggiornarlo, potremmo fare così:
this.setState({
username: 'Lewis'
});
React si aspetta che tu non modifichi mai lo state
direttamente: usa sempre this.setState()
quando si verificano cambiamenti di stato. Inoltre, dovresti notare che React può raggruppare più aggiornamenti di stato al fine di migliorare le prestazioni. Ciò significa che gli aggiornamenti di stato attraverso il metodo setState
possono essere asincroni. C'è una sintassi alternativa per il metodo setState
che fornisce un modo per aggirare questo problema. Questo raramente è necessario, ma è bene tenerlo in mente! Per favore consulta il nostro articolo su React per maggiori dettagli.
--instructions--
C'è un elemento button
nell'editor di codice che ha un gestore onClick()
. Questo gestore viene attivato quando il button
riceve un evento click nel browser, ed esegue il metodo handleClick
definito in MyComponent
. All'interno del metodo handleClick
, aggiorna lo state
del componente usando this.setState()
. Imposta la proprietà name
in state
in modo che sia uguale alla stringa React Rocks!
.
Fai clic sul bottone e guarda l'aggiornamento della presentazione dello stato. Non preoccuparti se ancora non capisci completamente come funziona il codice di gestione del click. Lo vedremo nelle prossime sfide.
--hints--
Lo stato di MyComponent
dovrebbe essere inizializzato con la coppia chiave/valore { name: Initial State }
.
assert(
Enzyme.mount(React.createElement(MyComponent)).state('name') ===
'Initial State'
);
MyComponent
dovrebbe presentare un'intestazione h1
.
assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1);
L'intestazione h1
dovrebbe contenere testo presentato dallo stato del componente.
async () => {
const waitForIt = (fn) =>
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
const first = () => {
mockedComponent.setState({ name: 'TestName' });
return waitForIt(() => mockedComponent.html());
};
const firstValue = await first();
assert(/<h1>TestName<\/h1>/.test(firstValue));
};
Chiamando il metodo handleClick
su MyComponent
si dovrebbe impostare la proprietà name nello stato sulla stringa React Rocks!
.
async () => {
const waitForIt = (fn) =>
new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
const first = () => {
mockedComponent.setState({ name: 'Before' });
return waitForIt(() => mockedComponent.state('name'));
};
const second = () => {
mockedComponent.instance().handleClick();
return waitForIt(() => mockedComponent.state('name'));
};
const firstValue = await first();
const secondValue = await second();
assert(firstValue === 'Before' && secondValue === 'React Rocks!');
};
--seed--
--after-user-code--
ReactDOM.render(<MyComponent />, document.getElementById('root'))
--seed-contents--
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Initial State'
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// Change code below this line
// Change code above this line
}
render() {
return (
<div>
<button onClick={this.handleClick}>Click Me</button>
<h1>{this.state.name}</h1>
</div>
);
}
};
--solutions--
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Initial State'
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// Change code below this line
this.setState({
name: 'React Rocks!'
});
// Change code above this line
}
render() {
return (
<div>
<button onClick = {this.handleClick}>Click Me</button>
<h1>{this.state.name}</h1>
</div>
);
}
};