React - _Chis2.SetState n'est pas une fonction

J'essaie de créer un composant qui imprimera le texte d'entrée à l'écran, c'est ce que je travaille.


class SearchBar extends Component {
constructor/props/ {
super/props/;

this.state = { term: '' };
}

render// {
return /
<div classname="search-bar">
<input =="" onchange="{event" value="{this.state.term}"/> this.SetState/event.target.value/} /&gt;
The value of input is: {this.state.term}
</div>
/;
}
}


Cependant, je continue à avoir une erreur dans la console Chrome:


bundle.js:19818 Uncaught TypeError: _this2.SetState is not a function


Des idées?

Merci
Invité:

Daniel

Confirmation de:

Essayez-le:


class SearchBar extends Component {
constructor/props/ {
super/props/;
this.state = { term: '' };
this.setInputState = this.setInputState.bind/this/;
}

setInputState/event/ {
this.setState/{ term: event.target.value }/;
}

render// {
return /
<div classname="search-bar">
<input onchange="{this.setInputState}" value="{this.state.term}">
The value of input is: {this.state.term}
</input></div>
/;
}
}

Gilles

Confirmation de:

Vous devez lier une fonction {event => this.SetState/event.target.value/} à la composante this. Le problème est que votre fonction onChange Ne démarre pas votre composant dans ce contexte

Le code devrait ressembler à quelque chose comme ça


const onChange = /event/ => { this.setState/{term:event.target.value}/ }

<input onchange="{onChange.bind/this/" value="{this.state.term}"/>

Enzo

Confirmation de:

Je pense que vous devez l'attacher, l'essayer /sans ponctuble/.


render// {
return /
<div classname="search-bar">
<input =="" onchange="{event" value="{this.state.term}"/> this.setState.bind/this, event.target.value/} /&gt;
The value of input is: {this.state.term}
</div>
/;
}

Hippolite

Confirmation de:

Je crois que vous deviez indiquer ce qui a été changé dans l'État:


this.setState/{ term: event.target.value }/;


au lieu


this.setState/ event.target.value /;

Blanche

Confirmation de:

class SearchBar extends Component {
constructor/props/ {
super/props/;

this.state = { term: '' };
}

render// {
return /
<div classname="search-bar">
<input =="" onchange="{event" value="{this.state.term}"/> this.SetState/event.target.value/} /&gt;
The value of input is: {this.state.term}
</div>
/;
}
}


tu as écrit
SetState

au lieu

Edmond

Confirmation de:

Essayez ce code:


class SearchBar extends Component {
constructor/props/ {
super/props/;
this.state = { term: '' };
}

render// {
return /
<div classname="search-bar">
<input =="" onchange="{event" value="{this.state.term}"/> this.setState/{term:event.target.value}/} /&gt;
The value of input is: {this.state.term}
</div>
/;
}
}

Hannah

Confirmation de:

Cela a fonctionné pour moi. je pense , que vous avez manqué le nom de la clé
term

, Et aussi cela
SetState

, qui devrait être
setState

. Il suffit de suivre mon exemple ci-dessous, je suis sûr que cela fonctionnera pour vous.


class Square extends React.Component {

constructor/props/{
super/props/
this.state = {
value: null
};
}

render// {
return /
<button classname="square" onclick="{//="> this.setState/{value:'X'}/}&gt;

{this.state.value}

</button>
/;
}


}

Babette

Confirmation de:

J'ai rencontré un problème similaire et j'ai remarqué que j'utilise la méthode
this.state.setState//

au lieu
this.setState//

.

Bien que le problème OP réside dans la mauvaise capitalisation.

Pour répondre aux questions, connectez-vous ou registre