如果字段为空，则禁用提交按钮

Question

我有一个使用钩子的 React 应用程序，并试图弄清楚如果搜索字段为空，如何使提交按钮保持禁用状态。

假设一个带有提交按钮的常规表单字段，我如何设置一个状态挂钩，使搜索按钮保持禁用状态，直到用户输入文本。我假设应该有一个 onChange 函数，它可能会在输入更改时更新状态，但不能完全确定实现。

const [disabled, isDisabled] = useState(true);

<input type="text" id="q" name="q" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>

Answer 1

如果您想在输入字符串为空时禁用按钮，那么您需要的唯一状态就是输入字符串的值。

const [inputVal, setInputVal] = useState('')

// ...

<input value={inputVal} onChange={e => setInputVal(e.target.value)} />

// ...

<button disabled={!inputVal}> /* ... */ </button>

这里我们将输入组件连接到状态值。这被称为 受控 组件，因为它的值由外部源（状态值）控制，而不是 不受控 组件，这意味着输入元素包含它的自己的内部状态（如果您不直接设置它们的 value 属性，则输入的默认方式工作。

当输入组件接收到输入（例如有人输入字符）时，onChange 属性被调用。然后我们所做的就是获取输入元素的新值 (e.target.value) 并使用它来设置状态。

如果您可以从其他状态派生状态，那么您不应该将其存储在状态中。拥有一个名为disabled 的状态变量只会让事情变得更复杂。总体思路是使用尽可能少的状态，并从该状态尽可能多地进行计算。

Answer 2

请查看我使用类组件并在状态对象下使用禁用属性的完整示例。当你在文本框上写东西时，disable 属性会被设置为 false。

import React from "react";
export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {disable: true};
    }

    handleChange = (event) => {
        this.setState({disable: event.target.value === ''})
    };

    render() {
        return (
            <div>
                <div>
                    Name: <input onChange={this.handleChange}/> <br/>
                    <button disabled={this.state.disable} >Login</button>
                </div>
            </div>
        );
    }
}

这里是功能组件的同一个例子

import React, {useState} from "react";
export default function Login() {

    const [disable, setDisable] = useState(true);

    function handleChange(event) {
        setDisable(event.target.value === '');
    }

    return (
        <div>
            <div>
                Name: <input onChange={handleChange}/> <br/>
                <button disabled={disable}>Login</button>
            </div>
        </div>
    );
}