使按鈕禁用使用反應失敗

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

以上jsx有道理嗎？我沒有得到任何compliation錯誤，只是我從反應說Unknown prop disabbed on <input> tag.使按鈕禁用使用反應失敗

如何更改按鈕attr禁用正確的方式？想象一下，如果我的輸入有很多類的CSS，我是否也需要重複它們？我覺得這是多餘的。

來源

2017-04-09 Giala Jefferson

<輸入禁用= {}裝載類型=「文字」 /> – elmeister

注意，你實際上是渲染文本字段。 –

您不需要對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>

來源

2017-04-09 11:35:40

請注意，使用'constructor'來設置初始'state'並不鼓勵，當你使用'super'時，你應該傳遞'... props'給它，以防萬一你要使用'this'。道具「在相同的背景下。最好使用類屬性語法。（'state = {... stuff}'） –

@FezVrasta我同意你應該將道具傳遞給構造函數，否則會導致潛在的錯誤。然而，爲什麼不鼓勵設置狀態構造函數。請參閱https://facebook.github.io/react/docs/react-component.html#constructorhttp://stackoverflow.com/questions/37782403/set-initial-react-component-state-in-constructor-or-componentwillmount和 –

該文檔使用'構造函數'，因爲它更廣泛，但由於我所解釋的原因導致更多的錯誤。您可以在類屬性內引用'this.props'並避免任何'超'怪癖。 https://gist.github.com/FezVrasta/630e92170d20618fc35d55c83fefcd2d –

使按鈕禁用使用反應失敗

回答

相關問題