使用反应禁用按钮失败

Question

render(){
  const { loading } = this.state;
  return(
    <div>
      {!loading ? <input disabled type='text' /> : <input type='text' />}
    </div>
  )
}

上面的 jsx 有意义吗？我没有收到任何编译错误，只是我收到了来自反应的警告Unknown propdisabbedon <input> tag.

如何正确更改按钮的属性以禁用？想象一下，如果我的输入有很多 CSS 类，我是否也需要重复它们？我觉得这是多余的。

Answer 1

您不需要在input 标记上进行条件渲染。您可以通过以下方式进行操作

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    }
  }
  render(){
    const { loading } = this.state;
    return(
      <div>
        <input disabled={loading} type='text'/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<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="app"></div>