1

На форме есть два инпута. Как в реакте сделать так, чтобы начиная вводить в одном Input-e, второй стал disabled Использую react-bootstrap и компонент FormControl для инпутов отсюда https://react-bootstrap.github.io/components.html#forms-props-form-control

то есть у меня два компонента FormGroup, внутри каждого FormControl.

1 ответ 1

0

Собственно, как-то так:

'use strict';

var Inputs = React.createClass({

    getInitialState: function() {
        return {
			    firstSet: false,
			    secondSet: false
        };
    },
    
    onCheckRuleClick: function(e) {
        this.setState({agreeNotChecked: !this.state.agreeNotChecked});
    },
    
	fieldChange: function(fieldName, e) {
        if (e.target.value.trim().length > 0) {
            this.setState({[''+fieldName]:true})
        } else {
            this.setState({[''+fieldName]:false})
        }
    },
    
    render: function() {
        var secondSet = this.state.secondSet,
			      firstSet = this.state.firstSet;
            
        return (
            <form className='add cf'>
			
			<input
                    type='text'
                    className='first'
                    onChange={this.fieldChange.bind(this, 'secondSet')}
                    placeholder='Первый'
					disabled={firstSet}
                />
                
				<input
                    type='text'
                    className='second'
                    onChange={this.fieldChange.bind(this, 'firstSet')}
                    placeholder='Второй'
					disabled={secondSet}
                />
                
            </form>
        );
    }
});

var App = React.createClass({
    render: function() {
        console.log('render');
        return (
            <div className='app'>
                <Inputs />
            </div>
        );
    }
});

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Test on React</title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="root">Привет, я #root</div>


</body>
</html>

1
  • Функция onCheckRuleClick не нужна, просто не доглядел, когда удалял лишнее.
    – Илья
    5 июл 2017 в 11:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.