React.js：輸入爲空時禁用按鈕

我是React.js的新手，對不起，如果問題聽起來太愚蠢了。React.js：輸入爲空時禁用按鈕

我試圖在輸入字段爲空時禁用按鈕。 React對此有什麼要求？

我做類似如下：

<input ref="email"/> 

<button disabled={!this.refs.email}>Let me in</button>

這是正確的嗎？

這不僅僅是動態屬性的重複，因爲我也對將數據從一個元素傳輸/檢查到另一個元素感到好奇。

來源

2015-05-12 Stepan Suvorov

可能重複（http://stackoverflow.com/questions/29103096/dynamic-attribute-in-reactjs） – WiredPrairie

134

你需要保持狀態，輸入的電流值（或通過改變它的價值up to a parent via a callback function，或sideways，或者<您的應用程序的狀態管理此解決方案>使得它最終被傳遞迴你組件作爲道具），因此您可以派生出該按鈕的殘疾人道具。

實施例使用狀態：

<meta charset="UTF-8"> 
 
<script src="https://fb.me/react-0.13.3.js"></script> 
 
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script> 
 
<div id="app"></div> 
 
<script type="text/jsx;harmony=true">void function() { "use strict"; 
 

 
var App = React.createClass({ 
 
    getInitialState() { 
 
    return {email: ''} 
 
    }, 
 
    handleChange(e) { 
 
    this.setState({email: e.target.value}) 
 
    }, 
 
    render() { 
 
    return <div> 
 
     <input name="email" value={this.state.email} onChange={this.handleChange}/> 
 
     <button type="button" disabled={!this.state.email}>Button</button> 
 
    </div> 
 
    } 
 
}) 
 

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

 
}()</script>

[在ReactJS動態屬性]的

來源

2015-05-12 10:45:04

@STEVER這是因爲在Angular中你有2路綁定的概念，而React「強制」1路綁定。有一種特殊的混合模式可以用來模擬這種將兒童價值道具鏈接到狀態字段的簡單情況的雙向綁定：LinkedStateMixin – Nico

真棒，示例運行和所有內容。不錯的完整例子和漂亮的互動演示，SO。 – cr125rider

React.js：輸入爲空時禁用按鈕

回答

相關問題