TL; DR: используйте defaultChecked вместо отмеченного рабочего jsbin .
Попытка установить простой флажок, который будет перечеркивать его текст метки, когда он установлен. По какой-то причине handleChange не запускается, когда я использую компонент. Может кто-нибудь объяснить, что я делаю не так?
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>
);
}
});
Использование:
React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);
Решение:
Использование checked не позволяет (по-видимому) изменять базовое значение и, следовательно, не вызывает обработчик onChange. Переход на defaultChecked, похоже, исправляет это:
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})
проще, чем хранить значение. Затем тернарный оператор в проверяемом атрибуте:checked={this.state.checked ? 'checked': null}
this.refs.complete.getDOMNode().checked
. см. скрипку jsfiddle.net/d10xyqu1Ответы:
Чтобы получить отмеченное состояние вашего флажка, путь будет следующим:
Альтернативный вариант - получить его из события, переданного в
handleChange
метод:источник
checked
для контролируемых компонентов: /checked
означает, что состояние управляется вне компонента. Когда пользователь щелкает, вызывать нечего, такhandleChange
как состояние не обновляется. Вместо этого вам нужно будет прослушиватьonClick
и запускать обновление состояния там.Ссылки в таких случаях лучше не использовать. Использование:
Есть несколько вариантов:
checked
противdefaultChecked
Первый будет реагировать как на изменения состояния, так и на щелчки. Последний будет игнорировать изменения состояния.
onClick
противonChange
Первый всегда запускался по кликам. Последний не будет срабатывать при щелчках, если
checked
атрибут присутствует вinput
элементе.источник
В сценарии, в котором вы НЕ хотите использовать обработчик onChange во входной DOM, вы можете использовать это
onClick
свойство в качестве альтернативы.defaultChecked
, Условие может оставить фиксированное состояние для V16 IINM.Надеюсь, это кому-то поможет в будущем.
источник
Если у вас есть
handleChange
функция, которая выглядит так:Вы можете создать настраиваемую
onChange
функцию, которая будет действовать как ввод текста:источник
handleChange
наinput
должно бытьthis.handleChange
?Если кто-то ищет универсальный обработчик событий, можно более или менее использовать следующий код (при условии, что свойство name установлено для каждого ввода):
источник
onChange не будет вызывать handleChange на мобильном устройстве при использовании defaultChecked. В качестве альтернативы вы можете использовать onClick и onTouchEnd.
источник
В пользовательском интерфейсе материала состояние флажка можно получить как
источник