Conjunto de casilla el valor en Reaccionar JS

Estoy tratando de cambiar el valor de la casilla de verificación con la onChange función de otro campo de entrada.

Tengo algo como esto:

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>
);
}
}

Mi InputRange componente es algo como esto:

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 casilla de valor en la carga inicial se establece en false. Cuando el usuario cambia el valor de la gama de precios slider, quiero que la casilla de verificación valor para cambiar a true.

Cuando el usuario cambia el valor de la gama de precios control deslizante a sus valores iniciales (valores min y max), quiero que la casilla de verificación valor para volver a cambiar a false.

No funciona en mi ejemplo.

Alguna idea?

estás seguro de que es un O ? (||) usted dice When user changes the values of the price range slider to their initial values (min and max values)
Si uno de estos valores no es igual a min y max valor, significa que el usuario ha cambiado el precio regulador, derecho?
Si UNO NO es igual (por lo que dicen de cambiar a pero no B A == valor inicial|| B == valor inicial se evalúe a TRUE, NO cambian a o B resultado sería el mismo, y sólo a cambio de la devolverá TRUE, por lo tanto, como usted bien dice, si UNO de ellos no es la inicial de uno que no la quiere devolver TRUE, por lo tanto es un operador and). Además no sé si hay más errores en su código, pero el cambio de la || de && es un buen comienzo. 🙂
Quiero devolver true si uno de ellos no es el inicial. Si el valor min == 0 y valor máximo == 20000, y si Ais cambia de 0 a 1000 y B es la misma, lo 20000; luego quiero cambiar de casilla de verificación de la verdad.

InformationsquelleAutor Boky | 2016-08-30

3 Comentarios

Su ejemplo no está funcionando correctamente, ya que se comprueba el valor antes de this.setState() se ha completado. No olvides que this.setState() no inmediatamente mutar el state.

Solucionarlo, puede crear una función en la que actualiza el valor de la casilla de verificación

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});
}
}

y, a continuación, pasar a su handleChange this.setState() llamadas.

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

Usted me ayudó mucho hoy en día. Gracias compañero 🙂

InformationsquelleAutor QoP

no estoy seguro, pero inténtelo :

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'));

InformationsquelleAutor Neeraj Prajapati

Aquí es una forma genérica de cambio de controlador que admite también las casillas de verificación

 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
});
}

InformationsquelleAutor DanielKhan

3 Comentarios

Dejar respuesta Cancelar respuesta