Ste*_*rov 153 reactjs react-jsx
我是React.js的新手,对不起,如果这个问题听起来太愚蠢了.
我正在尝试在输入字段为空时禁用按钮.React的最佳方法是什么？
我正在做类似以下的事情:
<input ref="email"/>
<button disabled={!this.refs.email}>Let me in</button>
它是否正确？
这不仅仅是动态属性的重复,因为我也很好奇将数据从一个元素传输/检查到另一个元素.
Jon*_*nan 237
你需要保持状态,输入的电流值(或它的值传递的变化通过一个回调函数到一个父母,或侧身,或<您的应用程序的状态管理解决方案,在这里>,使得它最终被传递回你的组件作为道具)所以你可以导出按钮的禁用道具.
使用状态的示例:
<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>另一种检查方法是内联函数，以便在每次渲染时检查条件（每个道具和状态更改）
const isDisabled = () =>
// condition check
这有效：
<button
type="button"
disabled={this.isDisabled()}
>
Let Me In
</button>
但这不起作用：
<button
type="button"
disabled={this.isDisabled}
>
Let Me In
</button>
使用常量可以组合多个字段进行验证：
class LoginFrm extends React.Component {
constructor() {
super();
this.state = {
email: '',
password: '',
};
}
handleEmailChange = (evt) => {
this.setState({ email: evt.target.value });
}
handlePasswordChange = (evt) => {
this.setState({ password: evt.target.value });
}
handleSubmit = () => {
const { email, password } = this.state;
alert(`Welcome ${email} password: ${password}`);
}
render() {
const { email, password } = this.state;
const enabled =
email.length > 0 &&
password.length > 0;
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Email"
value={this.state.email}
onChange={this.handleEmailChange}
/>
<input
type="password"
placeholder="Password"
value={this.state.password}
onChange={this.handlePasswordChange}
/>
<button disabled={!enabled}>Login</button>
</form>
)
}
}
ReactDOM.render(<LoginFrm />, document.body);<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>
<body>
</body>| 归档时间： |
|
| 查看次数： |
200087 次 |
| 最近记录： |