CODEWITHSUNDEEP
javascriptreactjs
Yazdan bayati
Yazdan bayati

Reputation: 31

disable an element in React Js

I'm new in react Js and i wanna set disable some of element according to the conditions

I have three element in my form one select and two input

according to selected item one of input must be disable

this is my component code:

class AddUser extends React.Component {

constructor(props) {
super(props);

this.state = {
user: {
}

};

}

render() {
    if (this.props.user) {
        this.state.user= this.props.user;
    }    

return (

        <div className="form-group">
            <label className="control-label">type<span className="symbol required"></span></label>
            <select className="form-control" name="CompanyMeetingType" value={this.state.user.type>
                <option value="1"> type1</option>
                <option value="2">type2</option>
                <option value="3">both</option>
            </select>
        </div>

        <div className="form-group">
            <label className="control-label">type1(%)<span className="symbol required"></span></label>
            <input required type="text" name="type1" className="form-control" disabled={this.state.user.type ==2} />
        </div>

        <div className="form-group">
            <label className="control-label">type1(%)<span className="symbol required"></span></label>
            <input required type="text" name="type2" className="form-control" disabled={this.state.user.type ==1} />
        </div>
)

}

when I'm changing the selected item disable work correctly but when I'm filing select element in edit mode disable not work

Upvotes: 0

Views: 4190

Answers (2)

Amit Chauhan
Amit Chauhan

Reputation: 1884

class Application extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        value: '1'
    }
    this.handleSelect = this.handleSelect.bind(this);
}
handleSelect(e) {
    console.log('enter');
    this.setState({
        value: e.target.value
    })
}
render() {
    console.log(this.state.value)
    return ( 
      <div >
        <select value = { this.state.value} onChange = {this.handleSelect} >
         <option value = "" >select value </option>
         <option value = "1" >value 1 </option>
         <option value = "2" >value 2 </option>
         <option value = "3" >both </option>
         </select> 
         <br / >
        <hr / >
        <input type = "text" disabled = {this.state.value == 1 || this.state.value == 3 }/>
        < br / > < br / >
        < input type = "text" disabled = { this.state.value == 2 || this.state.value == 3 }/> 
      < /div>
     );
    }
  }
React.render( < Application / > , document.getElementById('app'))

The only thing that you are missing is handleSelect function which handles the event of select value and sets state. it works perfectly as you want. and if you want to pre default disable any input tag then just pass that value in the state so when component will render that tag will be disabled.

Upvotes: 1

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

I don't see onChange handlers. Try:

<select 
  className="form-control" 
  name="CompanyMeetingType" 
  value={this.state.user.type} 
  onChange={(e) => this.setState({ user: { type: e.target.value } })}>
   <option value="1"> type1</option>
   <option value="2">type2</option>
   <option value="3">both</option>
</select>

Upvotes: 0

Related Questions