Я новичок в React.js, извините, если вопрос звучит слишком глупо для вас.
Я пытаюсь отключить кнопку, когда поле ввода пуст. Каков подход Beest в React для этого?
Я делаю что-то вроде следующего:
<input ref="email"/>
<button disabled={!this.refs.email}>Let me in</button>
Правильно ли это?
Это не просто дублирование динамического атрибута, потому что мне также интересно, как переносить/проверять данные из одного элемента в другой.
Вам нужно сохранить текущее значение входа в состоянии (или передать изменения в его значении до родителя с помощью функции обратного вызова, или вбок или это решение для управления состоянием вашего приложения здесь > , так что оно в конечном итоге будет передано обратно в ваш компонент в качестве опоры), чтобы вы может вывести отключенную опору для кнопки.
Пример использования состояния:
<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>
Использование констант позволяет объединить несколько полей для проверки:
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>
Другой способ проверить - включить функцию, чтобы условие было проверено на каждом рендере (каждый реквизит и изменение состояния)
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 DisableButton extends Components
{
constructor()
{
super();
// now set the initial state of button enable and disable to be false
this.state = {isEnable: false }
}
// this function checks the length and make button to be enable by updating the state
handleButtonEnable(event)
{
const value = this.target.value;
if(value.length > 0 )
{
// set the state of isEnable to be true to make the button to be enable
this.setState({isEnable : true})
}
}
// in render you having button and input
render()
{
return (
<div>
<input
placeholder={"ANY_PLACEHOLDER"}
onChange={this.handleChangePassword}
/>
<button
onClick ={this.someFunction}
disabled = {this.state.isEnable}
/>
<div/>
)
}
}