Réagir, Impossible de lire la propriété 'setState' undefined
pour une raison quelconque, j'obtiens le message d'erreur " Réagissent - Impossible de lire la propriété 'setState' undefined". Donc, ce.l'état n'est jamais mis à jour avec les valeurs que les entrées de l'utilisateur. Quand j'ai essayé la liaison qui est commenté, je reçois un comportement étrange où je ne suis pas en mesure pour le type d'entrée pour le nom d'utilisateur et je n'ai plus l'erreur nulle, mais les valeurs sont tout simplement pas défini. Toute aide serait appréciée. Merci.
import __fetch from "isomorphic-fetch";
import React from "react";
import InlineCss from "react-inline-css";
import Transmit from "react-transmit";
import Header from './components/header'
class Registration extends React.Component {
componentWillMount () {
if (__SERVER__) {
console.log("Hello server from Registration");
}
if (__CLIENT__) {
console.log("Hello Registration screen");
}
}
constructor () {
super()
this.state = {
name: '',
password: ''
}
//this.onChangeName = this.onChangeName.bind(this);
//this.onChangePassword = this.onChangePassword.bind(this);
}
onChangeName(e) {
//this.state.name = e.target.name
this.setState({ name: e.target.name});
}
onChangePassword(e) {
//this.state.password = e.target.name
this.setState({ password: e.target.password });
}
emptinessChecker(){
let {name, password} = this.state
console.log(name)
if (name === "" || password === "") {
return true;
}
else {
return false;
}
}
submit() {
console.log(this)
console.log(this.state)
if (this.emptinessChecker()){
alert("Please do not leave any fields blank!");
}
else{
var xhr = new XMLHttpRequest(); //new HttpRequest instance
xhr.open("POST", "/edit");
xhr.addEventListener("load", e => {
console.log(xhr.responseText)
});
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(this.state));
window.location.href= "/success"
}
}
render () {
//let {username, password} = this.state
if (__SERVER__) {
console.log("render server from registration");
}
if (__CLIENT__) {
console.log('we client now!')
}
return (
<InlineCss stylesheet={Registration.css()} namespace="Registration">
<Header />
<div>
<div className = "Register" >
Register
</div>
<ul className="account-fields">
<div className = 'Name'>
<label>Username</label>
<input type="text" value={this.state.name} onChange={this.onChangeName} />
</div>
<div className = 'Password'>
<label>Password</label>
<input type="password" value={this.state.password} onChange={this.onChangePassword} />
</div>
<div className='submitForm'>
<div className='submit' onClick={e=>this.submit()}>Submit</div>
</div>
</ul>
</div>
</InlineCss>
);
}
/**
* <InlineCss> component allows you to write a CSS stylesheet for your component. Target
* your component with `&` and its children with `& selectors`. Be specific.
*/
static css () {
return (`
& .Register {
position: fixed;
right: 550px;
bottom: 550px;
font-size: 50px;
}
& .account-fields {
position: fixed;
right: 550px;
bottom: 450px;
font-size: 20px;
}
& .submitForm {
position: fixed;
right: 10px;
bottom: 10px;
width: 200px;
}
& .submit {
cursor: pointer;
text-align: center;
font-size: 20px;
padding: 10px;
background-color: #00E4A5;
color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.13);
border-bottom: 2px solid #00C791;
text-shadow: 0px -1px 0px #009E73;
}
`);
}
}
export default Transmit.createContainer(Registration);
Pourquoi êtes-vous essayer de définir ces méthodes dans le constructeur s'ils existent déjà dans le cadre de la définition de la classe?
stackoverflow.com/questions/32317154/...
stackoverflow.com/questions/32317154/...
OriginalL'auteur user3708762 | 2015-11-29
Vous devez vous connecter pour publier un commentaire.
Dans ces gestionnaires d'événements,
e.target
est le<input>
qui a déclenché l'événement.Vous obtenez une entrée de la valeur à l'aide de son
value
propriété:Vous devez également vous assurer
this
est lié correctement, comme l'a commenté le code de votre constructeur.Si vous donnez à vos entrées adapté
name
les accessoires, vous remplacez-le par un seulonChange
gestionnaire:OriginalL'auteur Jonny Buchanan
modifier
Si vous allez à suivre le modèle de la liaison dans le constructeur, assurez-vous d'utiliser un bon constructeur invocation:
Avis
props
à l'intérieur du constructeur.réponse originale à cette question
Puisqu'il semble que vous utilisez ES6 les définitions de composant, il est conseillé de lier
this
dans le rendu du composant:Vous n'avez pas besoin de définir ce genre de choses dans le constructeur:
Il semble aussi que vous avez peut-être laissé un peu de code dans votre exemple, donc je ne sais pas si vous avez été d'essayer de se débarrasser de l'inutile pour l'amour de exemple ou quoi, mais assurez-vous que votre composant est correctement structuré.
OriginalL'auteur Josh Beam
Si vous utilisez une flèche fonction, alors vous n'aurez pas besoin de se lier.
OriginalL'auteur Burak Kahraman