CODEWITHSUNDEEP
reactjsantd
Anon
Anon

Reputation: 1387

How to get the InputNumber name in antdesign for react?

I am working with antdesign for ReactJS.

My code looks like this:

<InputNumber
    formatter={value => `${value} hrs`}
    parser={value => value.replace(' hrs', '')}
    type="text"
    onChange={props.changed}
    name='hours'
    min={0}
    max={24}
    defaultValue={8} />

changehandler:

  changeHandler = (event, id) => {
     console.log(event + ' ' + typeof event);
     console.log(event.target.name + ' ' + typeof event.target.name);
  }

So far, I have tried looking around for this and seems like others have come across the same issue: https://github.com/ant-design/ant-design/issues/8683

The console log in my changeHandler fxn returns a number and undefined for the second line.

How can I get the name?

Upvotes: 2

Views: 4476

Answers (2)

Nabil Shahid
Nabil Shahid

Reputation: 1458

If you use normal function instead of an arrow function as change handler, the this inside that function will be the event.target and you can get name as well as value from this. However you wont be able to access this for the react class so you will have to use function closure to store the value of this for react class. 

<InputNumber
    formatter={value => `${value} hrs`}
    parser={value => value.replace(' hrs', '')}
    type="text"
    onChange={props.changed(this)}
    name='hours'
    min={0}
    max={24}
    defaultValue={8} />

  changeHandler(reactThis){
    var classThis=reactThis;//use classThis to access this pointing to react class
    return function(value){
      console.log(this.name,this.value,value);//will print name, current value and changed value
      //classThis.setState({}) will work here
    };
  }

And in the this

Upvotes: 1

anton62k
anton62k

Reputation: 371

onChange only gets the value that was changed

You can use a curried function here.

  changeHandler = name => value => {
     console.log(name, value);
  };

  <InputNumber
    onChange={this.changeHandler("hours")}
  />

Upvotes: 6

Related Questions