Как отключить кнопку отправки формы, пока все поля ввода не будут заполнены ?! ReactJS ES2015

Question

Привет, я нашел ответ на это для одной формы поля ... но что, если у нас есть форма с несколькими полями?

это нормально для отключения, если у вас есть 1 поле, но он не работает, если вы хотите, чтобы отключить его на основе многих областях:

getInitialState() { 
    return {email: ''} 
    }, 
    handleChange(e) { 
    this.setState({email: e.target.value}) 
    }, 
    render() { 
    return <div> 
     <input name="email" value={this.state.email} onChange={this.handleChange}/> 
     <button type="button" disabled={!this.state.email}>Button</button> 
    </div> 
    } 
}) 

Answer 1

Вот основные настройки для проверки формы:

getInitialState() { 
    return { 
     email: '', 
     text: '', 
     emailValid: false,   // valid flags for each field 
     textValid: false, 
     submitDisabled: true  // separate flag for submit 
    } 
    }, 
    handleChangeEmail(e) {   // separate handler for each field 
    let emailValid = e.target.value ? true : false;  // basic email validation 
    let submitValid = this.state.textValid && emailvalid // validate total form 
    this.setState({ 
     email: e.target.value 
     emailValid: emailValid, 
     submitDisabled: !submitValid 
    }) 
    }, 
    handleChangeText(e) {   // separate handler for each field 
    let textValid = e.target.value ? true : false;  // basic text validation 
    let submitValid = this.state.emailValid && textvalid // validate total form 
    this.setState({ 
     text: '', 
     textValid: textValid, 
     submitDisabled: !submitValid 
    }) 
    }, 
    render() { 
    return <div> 
     <input name="email" value={this.state.email} onChange={this.handleChangeEmail}/> 
     <input name="text" value={this.state.text} onChange={this.handleChangeText}/> 
     <button type="button" disabled={this.state.submitDisabled}>Button</button> 
    </div> 
    } 
}) 

В более сложной настройке вы можете поместить каждое поле ввода в отдельный компонент. И сделайте код более DRY (обратите внимание на дублирование в обработчиках изменений).
Существуют также различные решения для реакционных форм, например here.

Answer 2

Я бы немного по-другому, как здесь ...

Вместо установки submitDisabled в каждом onChange обработчика я бы зацепить в методе жизненного цикла, чтобы прослушать изменения.
Точнее, в componentWillUpdate(nextProps, nextState). Этот метод вызывается перед каждым изменением компонента - изменение реквизита или изменение состояния. Здесь вы можете проверить свои данные формы и установить необходимый флажок - все в одном месте. Пример
Кода:

componentWillUpdate(nextProps, nextState) { 
    nextState.invalidData = !(nextState.email && nextState.password); 
}, 

Полных рабочей скрипка https://jsfiddle.net/4emdsb28/