Question

如何在 React.js 中禁用按钮

2017-01-05

521612

javascript reactjs

我有这个组件：

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

}

我希望当输入值为空时禁用按钮。但上面的代码不起作用。它显示：

add-item.component.js:78 Uncaught TypeError: Cannot read property 'value' of undefined

指向 disabled={!this.input.value 。我在这里做错了什么？我猜也许在执行 render 方法时尚未创建 ref。如果是，那么解决方法是什么？

Answer 1

使用 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>

Answer 2

在 HTML 中，

<button disabled/>
<button disabled="true">
<button disabled="false">
<button 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>
    );
}

Answer 3

这是一个使用 React Hooks 的功能组件品种。

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