Как сделать Input disabled? React + Bootstrap

309

06 июля 2017, 04:22

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

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

Answer 1

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

'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>