const states = ['', 'Moscowskaya'];
const cities = {
'Moscowskaya': ['Moscow']
};
const Selects = React.createClass({
getInitialState() {
return { state: '' };
},
_onStateChange(event) {
this.setState({ state: event.target.value });
},
render() {
return (
<div>
<select onChange={this._onStateChange}>{states.map((state) => <option key={state} value={state}>{state}</option>)}</select>
{this.state.state ? <select>{cities[this.state.state].map((city) => <option key={city} value={city}>{city}</option>)}</select> : null}
</div>
);
}
});for на элементе label в JSX должен быть записан как htmlFor. Вот здесь есть список всех тегов и атрибутов в JSX: https://facebook.github.io/react/docs/tags-and-att... <InputValidator /> который оборачивает поле ввода и имеет в себе логику валидации. В этот компонент можно передать правила валидации (pattern, length, и т.д.), а на onChange уже делать dispatch и обновлять глобальное состояние.onChange, вторым параметром, после события, или добавлять в объект события.label, таков стандарт и это автоматически делает поле формы более доступным.Object.keys(obj).map(key => obj[key].author); // returns array of author namesrender() {
let component = true ? <Comp1 /> : <Comp2 />;
return (
<div>{component}</div>
);
}let Form = React.createClass({
getInitialState() {
return {
fieldsCount: 1
};
},
_addField() {
this.setState({ fieldsCount: this.state.fieldsCount + 1 });
},
render() {
let fields = [];
for (let i = 0; i < this.state.fieldsCount; i++) {
fields.push(<input />);
}
return (
<form>
{fields}
<button onClick={this._addField}>+</button>
</form>
);
}
});