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')}
//Рега
class Register extends React.Component {
constructor(props) {
super(props)
this.updateField = this.updateField.bind(this)
this.state = {
profileName: {
valid: true,
value: ''
},
email: {
valid: true,
value: ''
},
confPass: {
valid: true,
value: ''
}
}
}
// явный биндинг
updateField(fieldKey, e) {
const value = e.target.value;
this.setState((state) => {
state[fieldKey].value = value;
return Object.assign({}, state)
})
}
render() {
return <div className='auth__reg'>
<div className='auth__card'>
<Input className='auth__input'
labelInside
value={this.state.profileName.value}
label={
<Translation>
{t => t('auth.label.profile')}
</Translation>
}
onChange={this.updateField.bind(this, 'profileName')}/>
<Input className='auth__input'
labelInside
value={this.state.email.value}
label={
<Translation>
{t => t('auth.label.email')}
</Translation>
}
onChange={this.updateField.bind(this, 'email')}/>
<Input className='auth__input'
labelInside password
value={this.state.password.value}
label={
<Translation>
{t => t('auth.label.setPass')}
</Translation>
}
onChange={this.updateField.bind(this, 'password')}/>
<Input className='auth__input'
labelInside password
value={this.state.confPass.value}
label={
<Translation>
{t => t('auth.label.confirmPass')}
</Translation>
}
onChange={this.updateField.bind(this, 'confPass')}/>
</div>
</div>
}
}
//логин
class Login extends React.Component {
constructor(props) {
super(props);
this.updateField = this.updateField.bind(this)
this.state = {
remember: true,
login: {
value: ''
}
}
}
// и вот она снова...
updateField(fieldKey, e) {
const value = e.target.value;
this.setState((state) => {
state[fieldKey].value = value;
return Object.assign({}, state)
})
}
render() {
return <div className='auth__login'>
<div className='auth__card'>
<Input className='auth__input'
labelInside
value={this.state.login.value}
label={
<Translation>
{t => t('auth.label.login')}
</Translation>
}
onChange={this.updateField.bind(this, 'login')}/>
</div>
</div>
}
}