如何在React.js中禁用按钮

Question

我有这个组成部分：

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未捕获的TypeError：无法读取未定义的属性“值”

指向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>