Отключить кнопку, когда вход пуст в реакции

Question

, поэтому я новичок в реакции, и у меня возникает эта проблема, когда я хочу отключить кнопку, когда вход пуст в реакции, он работает только один раз до; (

import React, { Component } from 'react';
class Form extends Component {
    render() {
        // start disable button when input is empty
        const success = () => {
            if (document.getElementById("id").value === "") {
                document.getElementById('button').disabled = true;
            } else {
                document.getElementById('button').disabled = false;
            }
        }
        // End disable button when input is empty
        return (
            <form onSubmit={this.props.addCourse}>
                <input onKeyUp={() => success()} id='id' value={this.props.value} type='text' onChange={this.props.updateCourse} />
                <button disabled id="button" type='submit'>Add Course</button>
            </form>


        );
    };

}


export default Form;

Answer 1

Вы можете просто сделать это как

  <form onSubmit={this.props.addCourse}>
                <input onKeyUp={() => success()} id='id' value={this.props.value} type='text' onChange={this.props.updateCourse} />
                <button disabled={this.props.value === ""} id="button" type='submit'>Add Course</button>
    //added condition to button disabled property
            </form>

Если значение this.props.value пусто, оно вернет true и, следовательно, кнопка будет отключена.

Answer 2

Как правило, не рекомендуется напрямую манипулировать DOM с помощью реакции, поскольку реакция взаимодействует с виртуальным DOM для отображения страницы.

см .: https://dzone.com/articles/dom-manipulation-in-react

A Лучший способ решить вашу проблему - проверить значение, установив this.props.value вместо

if (document.getElementById("id").value === "")

Вы также должны сохранить, отключена кнопка или нет в this.state

Учитывая это, в вашем this.props.updateCourse вы можете проверить, где

updateCourse(event) {
// If input value is equal to '' then
// Set button state to disabled
}

Answer 3

При использовании React вы не хотите получать прямой доступ к элементам, как вы делаете с document.getElem.... Вы хотите создать state. Что вы хотите сделать, это создать переменную disabled, которая равна true, когда ввод пуст, false в противном случае. Затем, когда дело доходит до добавления отключенного свойства к кнопке: <button disabled={disabled}...>. Так что теперь свойство disabled кнопки будет значением вашей отключенной переменной.