Question

所以我是React的新手，当我想在输入为空时禁用按钮时，我会遇到这个问题，它只能工作一次，直到;（

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

使用React时，您不想像使用document.getElem...那样直接访问元素。您要创建一个state。您要做的是创建一个变量disabled，当输入为空时为true，否则为false。然后，将禁用的属性添加到按钮：<button disabled={disabled}...>。因此，现在按钮的disable属性将成为您禁用变量的值。

Answer 2

您可以这样做

  <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 3

通常不建议在react与虚拟DOM交互以呈现页面时，通过react直接操作DOM。

请参阅：https://dzone.com/articles/dom-manipulation-in-react

解决问题的更好方法是通过检查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
}

当输入为空时禁用按钮

3 个答案: