score:2
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.
Source: stackoverflow.com
Related Query
- Creating custom Input type file button in React
- custom file input button, creating an invisible input file type inside div inside button for file input
- React - input type file Semantic UI React
- React input type file onChange not firing
- Creating a Custom Button in React Typescript and add onClick Event
- Creating reusable Button Component with React and Typescript with not assignable type error
- Button input type submit not submitting in React with React Router
- React js customizing the input of type file using CSS
- changing an uncontrolled input of type file in React
- How can i restrict user from not selecting other file types using input type file with react and typescript?
- React hidden input type file onChange not firing
- Creating a button that commits an input field's text to my state in React
- React JS: Upload File Options is Not working On Custom button
- How to clear file type input field's file name in react
- I have issue with React forms when I try to post form with file type input
- how to set value in react input field type file using react bootstrap?
- How to create an input formfield with button that uploads a file using react and javascript?
- Implement a clear button for a custom input field to trigger required error with react hook form
- Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type
- Can't type in React input text field
- Creating custom function in React component
- How to allow input type=file to select the same file in react component
- Deactivate input in react with a button click
- How to display a image selected from input type = file in reactJS
- React Input Type not editable
- Facing issue while adding radio button in react - input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`
- React a component is changing an uncontrolled input of type checkbox to be controlled
- Mocking file input in React TestUtils
- React Material UI: How to give a button a custom color when disabled?
- React form error changing a controlled input of type text to be uncontrolled
More Query from same tag
- Rerendering component and useReducer initialization
- Does React.useCallback memoize curried functions?
- TypeError: Cannot read property "map" of undefined
- Delete particular item in React Table?
- Parsing error: Unexpected token when adding a conditional in react
- Styled Component only pass some value to custom component
- Triple click as events on React?
- How to keep a material ui select specific menu item selected?
- How to display a component inside a component multiple times on click in reactjs
- Using number variables with i18next.t() for generating gettext .po files
- fetch not returning data in react
- How to stop making api call on re-rendering in React?
- React component is re-rendering items removed from state
- Rendered Component doesn't show in storybook
- Why react-validation hasErrors issue
- How I can change eslint resolve settings
- Rewrite a mapStateToProps for a useSelector
- React unique key when mapping warning
- How to execute bound function outside of event handler in React?
- Antd RangePicker Component with React Hook Form
- React: button with spinner, how to know when the animation should stop?
- How can I arrange according to month using chart Js?
- React/Redux fetching data and conditionally render a component - too many re-renders
- Cannot read property 'map' of undefined because reducer has problems
- Do not return null values in loop
- Material UI invalid hook call
- Purpose of flexGrow in the parent div of a Material UI grid?
- How do I type this reduce callback?
- GraphQL query works in Gatsby page but not inside class component
- How to create a link in a row with @material-ui/data-grid