Использование переменной как части вызова this.state ReactJS

Question

Я пытаюсь создать проверку формы с помощью react-bootstrap и хотел бы избежать создания функции проверки для каждого ввода.

У меня есть этот вход:

<Input 
    hasFeedback 
    type="text" 
    label="Username" 
    bsStyle={this.state.UsernameStyle} 
    onChange={this.handleChange.bind(this, 'Username')} 
    value={this.state.Username} 
    bsSize="large" 
    ref="inptUser" 
    placeholder="Enter Username" 
/> 

Плюс, у меня есть две функции для обработки проверки и обновления состояния:

handleChange: function(name, e) { 
    var state = {}; 
    state[name] = e.target.value; 
    this.setState(state); 
    var namestyle = name + 'Style'; 
    this.setState(this.validationState(namestyle, e)); 
}, 

&

validationState: function(style, event) { 
    var length = event.target.value.length; 

    if (length > 4) this.setState({style: 'success'}); 
    else if (length > 2) this.setState({style: 'warning'}); 

    return {style}; 
} 

На данный момент если я изменю style до Username Я могу получить этот solutio n для работы с этим конкретным входом. Я мог бы сделать оператор if, и в зависимости от строки, которую я получаю в style, я могу вызвать соответствующее setState, но является ли это лучшим способом сделать это?

Спасибо!

Answer 1

handleChange должен собрать всю информацию, необходимую для изменения состояния, и позвонить по телефону setState один раз. vaslidationState следует не изменить состояние. Это должно быть просто вернув новый стиль:

validationState(value) { 
    return (value.length > 4) ? "success" : (value.length > 2) ? "warning" : "error"; 
} 

handleChange(name, e) { 
    const value = e.target.value; 
    const style = this.validationState(value); 
    const stateUpdates = { 
     [name]: value, 
     [`${name}Style`]: style 
    }; 
    this.setState(stateUpdates); 
}