score:2

Accepted answer

you can use the component 'state' to update your elements.

constructor(props: any)
{
  super(props);
  this.state = {message:'some initial message'};
}

and for the onchange event do:

getuploadedfilename = (e) => {
   let files = e.target.files,
       value = e.target.value,
       message;
   if( files && files.length > 1 ) message = `${files.length} files selected`;
   else                            message = value.split( '\\' ).pop();

   if(message) this.setstate({...this.state,message});
}

and then in the element just bind the value to the state:

<div>
   <input id={id} type="file" classname="km-btn-file" 
      data-multiple-caption={this.state.message}
      multiple={multiple} 
      onchange={this.getuploadedfilename}>
   </input>
   <label htmlfor={id} classname="km-button km-button--primary km-btn-file-label">
       <span>{text}</span>
   </label>
</div>

score:0

you'll need to bind the text property from props to your state, so in your constructor you'll have to do;

this.state = {...props};

or

this.state = { text: props.text, id: props.id, multiple: props.multiple };

then calling when you want to update the view value instead of manually setting the innerhtml on the label yourself; this.setstate({text : new value});

and in your render method;

const { id, text, multiple } = this.state;

what this does is when you call this.setstate, it tells react to re-render your component which then takes the updated values from the state.


Related Query

More Query from same tag