Jeu case valeur de Réagir JS

Je suis en train de changer la valeur de la case avec la onChange fonction d'un autre champ de saisie.

J'ai quelque chose comme ceci:

class price extends React.Component {
constructor(props) {
super(props);
this.state = {
minValue: 0,
maxValue: 20000,
step: 1000,
firstValue: null,
secondValue: null,
chcboxValue: false
};
this.handleChange = this.handleChange.bind(this);
}
componentWillMount() {
this.setState({firstValue: this.state.minValue, secondValue: this.state.maxValue});
}
handleChange(name, event) {
let value = event.target.value;
//We set the state value depending on input that is clicked
if(name === "second") {
if(parseInt(this.state.firstValue) < parseInt(value)) {
this.setState({secondValue:value});
}
} else {
//The first value can't be greater than the second value
if(parseInt(value) < parseInt(this.state.secondValue)) {
this.setState({firstValue: value});
}
}
//We set the checkbox value
if(parseInt(this.state.firstValue) != parseInt(this.state.minValue) || parseInt(this.state.secondValue) != parseInt(this.state.maxValue)) {
this.setState({chcboxValue: true});
} else {
this.setState({chcboxValue: false});
}
}
render() {
const language = this.props.language;
return (
<div>
<div className="priceTitle">{language.price}</div>
<InputRange language={language}
firstValue={parseInt(this.state.firstValue)}
secondValue={parseInt(this.state.secondValue)}
minValue={parseInt(this.state.minValue)}
maxValue={parseInt(this.state.maxValue)}
step={parseInt(this.state.step)}
handleChange={this.handleChange}
chcboxValue={this.state.chcboxValue}/>
</div>
);
}
}

Mon InputRange composant est quelque chose comme ceci:

const inputRange = ({language, firstValue, secondValue, minValue, maxValue, step, handleChange, chcboxValue}) => {
return (
<div>
<div className="rangeValues">Range : {firstValue} - {secondValue}</div>
<section className="range-slider">
<input type="checkbox" checked={chcboxValue} />
<input type="range" value={firstValue} min={minValue} max={maxValue} step={step}  onChange={handleChange.bind(this, "first")} />
<input type="range" value={secondValue} min={minValue} max={maxValue} step={step} onChange={handleChange.bind(this, "second")} />
<div className="minValue">{minValue}</div>
<div className="maxValue">{maxValue}</div>
</section>
</div>
);
};

La case de la valeur initiale de la charge est définie sur false. Lorsque l'utilisateur modifie la valeur de la gamme de prix de curseur, je veux que la case à cocher de la valeur pour modifier la valeur true.

Lorsque l'utilisateur change la valeur de la gamme de prix curseur à leurs valeurs initiales (valeurs min et max), je veux la case de la valeur à nouveau changer de faux.

Il n'est pas de travail dans mon exemple.

Des idées?

vous assurer qu'il est OU ? (||) vous dites When user changes the values of the price range slider to their initial values (min and max values)
Si l'une de ces valeurs n'est pas égal à min et max de la valeur, cela signifie que l'utilisateur a modifié le prix de curseur, droit?
Si l'UN n'est PAS égal (donc, dire que vous changer, mais pas B A == valeur initiale|| B == valeur initiale permettrait d'évaluer de VRAI, PAS changin A ou B, le résultat serait le même, et que le changement à la fois serait de retour donc VRAI comme vous le dites correctement si l'UN d'eux n'est pas l'initiale d'un vous ne voulez pas qu'elle renvoie TRUE, c'est donc un ET de l'opérateur). D'ailleurs je ne sais pas si il y a plus d'erreurs dans votre code, mais le changement de la || de && est un bon point de départ. 🙂
Je veux retourner true si l'un d'eux n'est pas le premier. Si la valeur min == 0 et max == 20000, et si l'Ais changé de 0 à 1000 et B est la même, donc 20000; alors je veux changer de case pour vrai.

OriginalL'auteur Boky | 2016-08-30

Votre exemple ne fonctionne pas correctement parce que vous êtes à la vérification de la valeur avant de this.setState() est terminé. N'oubliez pas que this.setState() ne prend pas immédiatement la mutation de l' state.

Pour résoudre ce problème, vous pouvez créer une fonction où vous mettez à jour la valeur de la case

updateCheckBox(){
if(parseInt(this.state.firstValue) != parseInt(this.state.minValue) || parseInt(this.state.secondValue) != parseInt(this.state.maxValue)){
this.setState({chcboxValue: true});
}else{
this.setState({chcboxValue: false});
}
}

et puis le passer à votre handleChange this.setState() appels.

handleChange(name, event){
let value = event.target.value;
//We set the state value depending on input that is clicked
if(name === "second"){
if(parseInt(this.state.firstValue) < parseInt(value)){
this.setState({secondValue:value}, this.updateCheckBox);
}
}else{
//The first value can't be greater than the second value
if(parseInt(value) < parseInt(this.state.secondValue)) {
this.setState({firstValue: value}, this.updateCheckBox);
}
}

jsfiddle

Vous m'a beaucoup aidé aujourd'hui. Merci s'accoupler 🙂
Vous êtes les bienvenus 😛

OriginalL'auteur QoP

pas sûr, mais essayez-le :

React.createElement('input',{type: 'checkbox', defaultChecked: false});

<input type="checkbox" checked={this.state.chkbox} onChange={this.handleChangeChk} />

var Checkbox = React.createClass({
getInitialState: function() {
return {
isChecked: true
};
},
toggleChange: function() {
this.setState({
isChecked: !this.state.isChecked //flip boolean value
}, function() {
console.log(this.state);
}.bind(this));
},
render: function() {
return (
<label>
<input
type="checkbox"
checked={this.state.isChecked}
onChange={this.toggleChange} />
Check Me!
</label>
);
}
});
React.render(<Checkbox />, document.getElementById('checkbox'));

OriginalL'auteur Neeraj Prajapati

Ici est une forme générique de changement de gestionnaire qui prend en charge également des cases à cocher

 onFormChange: (e) => {
//In my example all form values are stored in a state property 'model'
let model = this.state.model;
if(e.target.type == 'checkbox') {
if(model[e.target.name] === false) {
model[e.target.name] = true;
} else if(model[e.target.name] === true) {
model[e.target.name] = false;
} else {
//if the property has not be defined yet it should be true
model[e.target.name] = true;
}
} else {
model[e.target.name] = e.target.value;
}
//Update the state
this.setState({
model: model
});
}

OriginalL'auteur DanielKhan

Vous devez vous connecter pour publier un commentaire.