Question

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

以上jsx有道理吗？我没有得到任何恭维错误，只是我收到了警告，反应说Unknown prop被解雇on <input> tag.

如何更改按钮的attr以禁用正确的方法？想象一下，如果我的输入有很多css类，我还需要重复它们吗？我觉得这是多余的。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用反应失败禁用按钮

1 个答案: