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

我有一个React应用程序，它使用钩子，试图找出如何在搜索字段为空时禁用提交按钮

假设有一个带有submit按钮的常规表单字段，如何设置一个状态钩子，使搜索按钮保持禁用状态，直到用户输入文本。我假设应该有一个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>

const[disabled，isDisabled]=useState（true）；

如果要在输入字符串为空时禁用按钮，则需要的唯一状态是输入字符串的值

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

// ...

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

// ...

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

const[inputVal，setInputVal]=useState（“”）
// ...
setInputVal（e.target.value）}/>
// ...
/* ... */ 

这里我们将输入组件连接到状态值。这称为受控组件，因为它的值由外部源（状态值）控制，而不是由非受控组件控制，这意味着输入元素保持它自己的内部状态（如果不直接设置其

值

属性，则默认输入工作方式）

当输入组件接收到输入（例如某人键入字符）时，调用

onChange

属性。然后我们所做的就是获取输入元素的新值（

e.target.value

）并使用它设置状态

---

如果可以从其他状态派生状态，则不应将其存储在状态中。禁用名为

的状态变量只会使事情变得更复杂。一般的想法是尽可能少地使用状态，并从该状态计算尽可能多的值。
如果要在输入字符串为空时禁用按钮，则唯一需要的状态是输入字符串的值

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

// ...

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

// ...

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

const[inputVal，setInputVal]=useState（“”）
// ...
setInputVal（e.target.value）}/>
// ...
/* ... */ 

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

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

如果可以从其他状态派生状态，则不应将其存储在状态中。禁用名为
的状态变量只会使事情变得更复杂。一般的想法是使用尽可能少的状态，并从该状态计算尽可能多的值。
请检查我使用类组件a的完整示例在状态对象下使用禁用属性。当您在文本框中写入内容时，禁用属性将设置为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>
        );
    }
}

从“React”导入React；
导出默认类登录扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={disable:true}；
}
handleChange=（事件）=>{
this.setState（{disable:event.target.value==''}）
};
render（）{
返回(
名称：

登录
);
}
}

这里是功能组件的相同示例

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>
    );
}

import React，{useState}来自“React”；
导出默认函数登录（）{
const[disable，setDisable]=useState（true）；
函数句柄更改（事件）{
setDisable（event.target.value==''）；
}
返回(
名称：

登录
);
}
请检查我使用类组件并在状态对象下使用禁用属性的完整示例。当您在文本框中写入内容时，禁用属性将设置为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>
        );
    }
}

从“React”导入React；
导出默认类登录扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={disable:true}；
}
handleChange=（事件）=>{
this.setState（{disable:event.target.value==''}）
};
render（）{
返回(
名称：

登录
);
}
}

这里是功能组件的相同示例

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>
    );
}

import React，{useState}来自“React”；
导出默认函数登录（）{
const[disable，setDisable]=useState（true）；
函数句柄更改（事件）{
setDisable（event.target.value==''）；
}
返回(
名称：

登录
);
}
React关于的文档可能有助于将文本置于状态。React关于的文档可能有助于将文本置于状态。为什么需要在此处使用类组件？函数组件以更容易理解的方式完成这项工作。OP甚至问他们如何使用挂钩来完成。是的，我正要准备函数组件还有，我已经发布了为什么你需要在这里使用类组件？函数组件以一种更容易理解的方式来完成这项工作。OP甚至问他们如何使用钩子来完成。是的，没错，我正要准备我已经发布的函数组件