Javascript 如何在React.js中禁用按钮

我有这个部分：

import React from 'react';

export default class AddItem extends React.Component {

add() {
    this.props.onButtonClick(this.input.value);
    this.input.value = '';
}


render() {
    return (
        <div className="add-item">
            <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
            <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
        </div>
    );
}

}

从“React”导入React；
导出默认类AddItem扩展React.Component{
添加（）{
this.props.onButton单击（this.input.value）；
this.input.value=''；
}
render（）{
返回(
this.input=input}占位符={this.props.placeholder}/>
添加
);
}
}

我希望在输入值为空时禁用该按钮。但是上面的代码不起作用。它说：

add item.component.js:78未捕获类型错误：无法读取未定义的属性“value”

---

指向

disabled={！this.input.value}

。我在这里做错了什么？我猜在执行

render

方法时，可能还没有创建ref。如果是，那么工作循环是什么？

您不应该通过REF设置输入值

请参阅此处受控表单组件的文档-

简而言之

<input value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />

this.setState（{value:e.target.value}）}/>

---

然后，您将能够通过使用

disabled={！this.state.value}

this.input

来控制禁用状态，直到调用

ref

回调。尝试将

设置为该值。在构造函数中输入一些初始值

我的重点是：

在安装或卸载组件后，将立即执行回调

使用
refs
不是最佳实践，因为它直接读取DOM，最好使用React的
state
。此外，您的按钮不会更改，因为组件不会重新渲染并保持其初始状态

每次输入字段更改时，您可以使用
setState
和
onChange
事件侦听器再次呈现组件：

//输入字段侦听更改，更新React的状态并重新呈现组件。
this.setState（{value:e.target.value}）value={this.state.value}/>
//当输入状态为空时，按钮被禁用。

下面是一个工作示例：


class AddItem扩展了React.Component{
构造函数（）{
超级（）；
this.state={value:''}；
this.onChange=this.onChange.bind（this）；
this.add=this.add.bind（this）；
}
添加（）{
this.props.onButtonClick（this.state.value）；
this.setState（{value:'}）；
}
onChange（e）{
this.setState（{value:e.target.value}）；
}
render（）{
返回(
添加
);
}
}
ReactDOM.render(
console.log（v）}/>，
document.getElementById（'视图'）
);
在React中控制组件渲染的典型方法很少。

但是，我在这里没有使用任何这些，我只是使用ref来为组件的底层子级命名名称空间


class AddItem扩展了React.Component{
更改（e）{
如果（“！=e.target.value）{
this.button.disabled=false；
}否则{
this.button.disabled=true；
}
}
加（e）{
console.log（this.input.value）；
this.input.value=''；
this.button.disabled=true；
}
render（）{
返回(
this.input=input}onChange={this.change.bind（this）}/>
this.button=button}>Add
);
}
}
ReactDOM.render（，document.getElementById（'root'））

在HTML中

<button disabled/>
<buttton disabled="true">
<buttton disabled="false">
<buttton disabled="21">



所有这些都归结为disabled=“true”，这是因为它为非空字符串返回true。
因此，为了返回false，在条件语句中传递一个空字符串，如this.input.value？“true”：“

render() {
    return (
        <div className="add-item">
            <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
            <button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
        </div>
    );
}

render（）{
返回(
this.input=input}占位符={this.props.placeholder}/>
添加
);
}
我也遇到了类似的问题，结果证明我们不需要钩子来完成这些工作，我们可以进行条件渲染，它仍然可以正常工作


报名
只需添加：

<button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button>

添加
非常简单的解决方案是使用
useRef
hook

const buttonRef = useRef();

const disableButton = () =>{
  buttonRef.current.disabled = true; // this disables the button
 }

<button
className="btn btn-primary mt-2"
ref={buttonRef}
onClick={disableButton}
>
    Add
</button>

const buttonRef=useRef（）；
常量禁用按钮=（）=>{
buttonRef.current.disabled=true；//这将禁用按钮
}
添加

类似地，您可以使用
buttonRef.current.disabled=false来启用该按钮，这里是一个使用react钩子的功能组件变体

我提供的示例代码应该足够通用，可以根据特定用例进行修改，也可以用于搜索“如何禁用React中的按钮”的用户

import React, { useState } from "react";

const YourComponent = () => {
  const [isDisabled, setDisabled] = useState(false);
  
  const handleSubmit = () => {
    console.log('Your button was clicked and is now disabled');
    setDisabled(true);
  }

  return (
      <button type="button" onClick={handleSubmit} disabled={isDisabled}>
        Submit
      </button>
  );
}

export default YourComponent;

import React，{useState}来自“React”；
constyourcomponent=（）=>{
const[isDisabled，setDisabled]=useState（false）；
常量handleSubmit=（）=>{
log（'您的按钮被单击，现在被禁用'）；
setDisabled（true）；
}
返回(
提交
);
}
导出默认组件；
这是正确答案！应使用内部状态在输入发生变化时进行更新，按钮应简单地对此进行检查+1此.state有一个限制，即它会再次呈现UI，因此，如果您在子组件的文本框中键入内容并绑定到onChange事件，它会从文本框中失去焦点。如果它在同一个组件中，也可以，但在子组件中使用时会失去焦点。@Dynamic不应该发生这种情况。你有这样的工作示例吗？@Adrianopolis React从DOM中删除
disabled
属性，如果该属性设置为
false
-这对跨浏览器友好。@Adrianopolis我不知道该告诉你什么。与检查器一起查看实际运行的演示代码。React正在删除禁用的
属性。这是JSX，不是HTML。这里没有问题。如果堆栈溢出有一个支持答案的选项，我会选择这个答案很酷的解决方案，我做了相同的
？true:false
是不必要的