disable an element in React Js

Question

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

you dont have any onChange handlers...

Tomasz Mularczyk
– Tomasz Mularczyk

2018-05-20 06:42:17 +00:00
Commented May 20, 2018 at 6:42 — Tomasz Mularczyk
– Tomasz Mularczyk, Commented May 20, 2018 at 6:42
i added it but disable doesn't work Still

Yazdan bayati
– Yazdan bayati

2018-05-20 07:34:59 +00:00
Commented May 20, 2018 at 7:34 — Yazdan bayati
– Yazdan bayati, Commented May 20, 2018 at 7:34

Amit Chauhan · Accepted Answer · 2018-05-20 10:24:21Z

1

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.

edited May 20, 2018 at 10:24

answered May 20, 2018 at 8:37

Amit Chauhan

1,8943 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yazdan bayati Over a year ago

thank you for your answer but when I'm setting initialize value for select disable not work for example when in render function I'm setting 1 for value I expect It make first input disable but it doesn't work correctly

Amit Chauhan Over a year ago

You have to add event listener onChange in select tag and call a function which will call everytime you select any option value and where you define function pass e by which we can get the value whatsoever is selected. As a developer view add some console.log what value you are getting. Like add a console.log just after your function defines and add console.log just after render and print your selected type so that you will know on changing any option value is function calling or not and the value is changing or not.

Amit Chauhan Over a year ago

there are some error in your code check how i define constructor and you need to add close curly brace for constructor because constructor and render are different function, render can not be inside constructor function, and in constructor function you this.state = {user: {} } is wrong approach you should go with this.state : { user: { } }

Amit Chauhan Over a year ago

You have so many syntax error, there is one parent tag in jsx you don't have, <select className="form-control" name="CompanyMeetingType" value={this.state.user.type> in this line you are missing closing curly brace.

Amit Chauhan Over a year ago

if you want to disable first input on render (without selecting any option then just pass value 1 in state )

Tomasz Mularczyk · Accepted Answer · 2018-05-20 06:45:45Z

0

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>

answered May 20, 2018 at 6:45

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

Collectives™ on Stack Overflow

disable an element in React Js

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related