setWizardState(data) {
// выставил доп ключи, которые не нужны на сервере
Object.keys(data.steps).forEach(stepKey => {
data.steps[stepKey]['forcedOpen'] = false;
});
console.log('old state: ', Object.assign({}, this.state))
if (this.state.wizard.steps !== data.steps) {
this.setState(state => {
state.wizard.steps = data.steps;
state.wizard.active = true;
return Object.assign({}, {wizard: state.wizard})
}, () => {
console.log('new state: ', Object.assign({}, this.state))
if (this.state.wizard.steps.company.status === 'next') {
// если следующий таб в визарде next, я лочу ссылку на него
this.lockTab('company')
};
// запрос к настройкам текущего таба, которые попадут в его компонент пропсом
this.requestDataByRoute();
})
}
}toggleWizard(value) {
this.setState(state => {
state.wizard.active = value;
return {wizard: state.wizard}
})
}Дольше писать компоненты. Много "лишнего" кода. Но и проще тоже становится
class AlertCaller {
constructor(options) {
this.state = {
children: options.textError
}
this._render();
}
_render() {
console.log(this.state)
ReactDOM.render(
<Alert {...this.state} />,
document.getElementById("alerts")
);
}
destroy() {
ReactDOM.unmountComponentAtNode(this._container);
}
}// тот самый
class AlertRenderer extends React.Component {
constructor(props) {
super(props)
this.state = {...props}
}
/*
options
errorText - string
*/
setNewAlert(options) {
this.setState(state => {
state.children = options.errorText
state.warning = true;
return Object.assign({}, state)
}, () => {
this.forceUpdate()
})
}
render() {
return ReactDOM.createPortal(<Alert {...this.props}/>, document.getElementById("alerts"));
}
}const alert = new AlertRenderer();
document.getElementById('alerts').innerHTML = alert.render();
// получил Uncaught Invariant Violation: Target container is not a DOM element. от reactDOM
onChange={updateField.bind(this, 'login', this)const updateField = (fieldKey, context, event) => {
const value = event.target.value;
context.setState((state) => {
state[fieldKey].value = value;
return Object.assign({}, state)
})
}$('.icon').each((item) => {
let currentIconCode = $(item).data('icon'),
// где iconObject - мой плоский объект с иконками
iconContent = IconObject[currentIconCode]
$(item).html(iconContent)
})onChange={this.updateField.bind(this, 'email')}onChange={updateField(this, 'login')}