React.js: Отключить кнопку, когда вход пуст

Question

Я новичок в React.js, извините, если вопрос звучит слишком глупо для вас.

Я пытаюсь отключить кнопку, когда поле ввода пуст. Что такое подход «Бэст» в этом случае?

я делаю что-то вроде следующего:

<input ref="email"/> 

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

Правильно ли это?

Это не просто дублирование динамического атрибута, потому что мне также интересно, как переносить/проверять данные из одного элемента в другой.

Answer 1

Вам необходимо сохранить текущее значение входа в состоянии (или передать изменения в его стоимости 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>