如何在 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>
);
}


}

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

Js: 78 Uncatch TypeError: 无法读取未定义的属性“ value”

指向 disabled={!this.input.value}。我到底做错了什么？我猜测，在执行 render方法时，可能还没有创建 ref。如果是这样，那么解决办法是什么？

417510 次浏览
小开

您不应该通过引用设置输入的值。

请在此查看受控表单组件的文档 -https://facebook.github.io/react/docs/forms.html#controlled-components

简而言之

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

然后，您将能够通过使用 disabled={!this.state.value}来控制禁用状态

小开

在调用 ref回调之前，this.input是未定义的。请尝试在构造函数中将 this.input设置为某个初始值。

来自 反应文件的参考文献的，重点是我的:

回调将立即执行 之后组件被挂载或卸载

小开
最佳答案

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

您可以将 setState与 onChange事件侦听器一起使用，以便在每次输入字段更改时再次呈现组件:

// Input field listens to change, updates React's state and re-renders the component.
<input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} />


// Button is disabled when input state is empty.
<button disabled={!this.state.value} />

下面是一个实际的例子:

class AddItem extends React.Component {
constructor() {
super();
this.state = { value: '' };
this.onChange = this.onChange.bind(this);
this.add = this.add.bind(this);
}


add() {
this.props.onButtonClick(this.state.value);
this.setState({ value: '' });
}


onChange(e) {
this.setState({ value: e.target.value });
}


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


ReactDOM.render(
<AddItem placeholder="Value" onButtonClick={v => console.log(v)} />,
document.getElementById('View')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>

小开

在 React 中控制组件渲染的典型方法很少。 enter image description here

但是，我在这里没有使用任何一种方法，我只是使用了组件的子组件的参考名称空间。

class AddItem extends React.Component {
change(e) {
if ("" != e.target.value) {
this.button.disabled = false;
} else {
this.button.disabled = true;
}
}


add(e) {
console.log(this.input.value);
this.input.value = '';
this.button.disabled = true;
}


render() {
return (
<div className="add-item">
<input type="text" className = "add-item__input" ref = {(input) => this.input=input} onChange = {this.change.bind(this)} />
          

<button className="add-item__button"
onClick= {this.add.bind(this)}
ref={(button) => this.button=button}>Add
</button>
</div>
);
}
}


ReactDOM.render(<AddItem / > , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

小开

在 HTML 中,

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

它们都归结为 disabled="true"，这是因为它为非空字符串返回 true。 因此，为了返回 false，在类似于 this.input.value ? "true" : ""的 If判断语句中传递一个空字符串。

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

我有一个类似的问题，原来我们不需要钩子做这些，我们可以作出一个条件渲染，它仍然会工作良好。

<Button
type="submit"
disabled={
name === "" || email === "" || password === "" ? true : false
}
fullWidth
variant="contained"
color="primary"
className={classes.submit}>
SignUP
</Button>
小开

非常简单的解决方案就是使用 useRef钩子

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>

类似地，您可以使用 buttonRef.current.disabled = false启用按钮

小开

下面是使用反应挂钩的各种功能组件。

我提供的示例代码应该足够通用，可以用特定的用例进行修改，或者用于任何搜索“如何禁用 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;

提交答案