TLDR: Użyj defaultChecked zamiast sprawdzonego, działającego jsbin .
Próbuję ustawić proste pole wyboru, które przekreśli tekst swojej etykiety, gdy jest zaznaczone. Z jakiegoś powodu handleChange nie odpala, gdy używam komponentu. Czy ktoś może wyjaśnić, co robię źle?
var CrossoutCheckbox = React.createClass({
getInitialState: function () {
return {
complete: (!!this.props.complete) || false
};
},
handleChange: function(){
console.log('handleChange', this.refs.complete.checked); // Never gets logged
this.setState({
complete: this.refs.complete.checked
});
},
render: function(){
var labelStyle={
'text-decoration': this.state.complete?'line-through':''
};
return (
<span>
<label style={labelStyle}>
<input
type="checkbox"
checked={this.state.complete}
ref="complete"
onChange={this.handleChange}
/>
{this.props.text}
</label>
</span>
);
}
});
Stosowanie:
React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);
Rozwiązanie:
Korzystanie z zaznaczonego nie pozwala na zmianę wartości bazowej (najwyraźniej), a zatem nie wywołuje procedury obsługi onChange. Przełączanie na domyślne ustawienie Checked wydaje się rozwiązać ten problem:
var CrossoutCheckbox = React.createClass({
getInitialState: function () {
return {
complete: (!!this.props.complete) || false
};
},
handleChange: function(){
this.setState({
complete: !this.state.complete
});
},
render: function(){
var labelStyle={
'text-decoration': this.state.complete?'line-through':''
};
return (
<span>
<label style={labelStyle}>
<input
type="checkbox"
defaultChecked={this.state.complete}
ref="complete"
onChange={this.handleChange}
/>
{this.props.text}
</label>
</span>
);
}
});
this.setState({checked: !this.state.checked})
prostszy niż konieczność przechowywania wartości. Następnie operator trójskładnikowy w sprawdzonym attrubute:checked={this.state.checked ? 'checked': null}
this.refs.complete.getDOMNode().checked
. zobacz fiddle jsfiddle.net/d10xyqu1Odpowiedzi:
Aby uzyskać stan zaznaczenia pola wyboru, ścieżka będzie wyglądać następująco:
this.refs.complete.state.checked
Alternatywą jest pobranie go ze zdarzenia przekazanego do
handleChange
metody:źródło
checked
do kontrolowanych komponentów: /checked
oznacza, że stan jest zarządzany poza komponentem. Gdy użytkownik kliknie, nie ma nic do wywołania,handleChange
ponieważ żaden stan nie jest aktualizowany. Zamiast tego musiałbyś nasłuchiwaćonClick
i wyzwalać tam aktualizację stanu.W takich przypadkach lepiej nie używać referencji. Posługiwać się:
<input type="checkbox" checked={this.state.active} onClick={this.handleClick} />
Jest kilka opcji:
checked
vsdefaultChecked
Ten pierwszy reagowałby zarówno na zmiany stanu, jak i na kliknięcia. Ten ostatni ignorowałby zmiany stanu.
onClick
vsonChange
Ta pierwsza zawsze wywoływała kliknięcia. Ta ostatnia nie wywoła kliknięć, jeśli
checked
atrybut jest obecny winput
elemencie.źródło
W scenariuszu, w którym NIE chciałbyś używać procedury obsługi onChange na wejściowym DOM, możesz użyć tej
onClick
właściwości jako alternatywy.defaultChecked
, Warunek może opuścić stan ustalony dla v16 IINM.class CrossOutCheckbox extends Component { constructor(init){ super(init); this.handleChange = this.handleChange.bind(this); } handleChange({target}){ if (target.checked){ target.removeAttribute('checked'); target.parentNode.style.textDecoration = ""; } else { target.setAttribute('checked', true); target.parentNode.style.textDecoration = "line-through"; } } render(){ return ( <span> <label style={{textDecoration: this.props.complete?"line-through":""}}> <input type="checkbox" onClick={this.handleChange} defaultChecked={this.props.complete} /> </label> {this.props.text} </span> ) } }
Mam nadzieję, że to pomoże komuś w przyszłości.
źródło
Jeśli masz
handleChange
funkcję, która wygląda tak:handleChange = (e) => { this.setState({ [e.target.name]: e.target.value, }); }
Możesz utworzyć funkcję niestandardową,
onChange
tak aby działała jak wprowadzanie tekstu:<input type="checkbox" name="check" checked={this.state.check} onChange={(e) => { this.handleChange({ target: { name: e.target.name, value: e.target.checked, }, }); }} />
źródło
handleChange
włączone,input
powinno byćthis.handleChange
?W przypadku, gdy ktoś szuka uniwersalnej obsługi zdarzeń, można użyć mniej więcej następującego kodu (zakładając, że właściwość name jest ustawiona dla każdego wejścia):
this.handleInputChange = (e) => { item[e.target.name] = e.target.type === "checkbox" ? e.target.checked : e.target.value; }
źródło
onChange nie wywoła handleChange na telefonie komórkowym podczas korzystania z defaultChecked. Alternatywnie możesz użyć onClick i onTouchEnd.
<input onClick={this.handleChange} onTouchEnd={this.handleChange} type="checkbox" defaultChecked={!!this.state.complete} />;
źródło
W materialnym interfejsie użytkownika stan pola wyboru można pobrać jako
this.refs.complete.state.switched
źródło