score:4
the 'react' way of doing this is to control the button's disabled
attribute in the render method, and using the component's state to keep track of it.
for example:
var mycomponent = react.createclass({
getinitialstate: function() {
return { disabled: false };
},
disableformbutton: function() {
this.setstate({ disabled: true });
},
render() {
return (
<div>
...
<button
disabled={this.state.disabled}
onclick={this.disableformbutton.bind(this)}>
disable
</button>
</div>
);
}
});
note that you no longer need the ref
, as you don't need to access the dom node from outside the render
method.
see thinking in react from the react.js documentation for more information about what should be stored in a component's state, and what should be passed as properties.
for those reading in 2020 and later
since the introduction of the hooks api in react, you can rewrite the example here using a functional component.
const mycomponent = () => { const [disabled, setdisabled] = react.usestate(false) return ( <button disabled={disabled} onclick={() => setdisabled(true)}> disable </button> ) }
score:5
use standard dom api for this, like:
react.finddomnode(this.refs.formbutton).setattribute('disabled', true)
or, if you want to use jquery:
$(react.finddomnode(this.refs.formbutton)).attr('disabled')
Source: stackoverflow.com
Related Query
- How to manipulate attributes from ref selector
- How to access custom attributes from event object in React?
- How to access data attributes from event object
- How to destruct `data-*` (hyphen cased) attributes from props?
- How correctly pass a node from a ref to a context?
- How to get ref from a React 16 portal?
- How to fix 'Extra attributes from the server: style' warning in console
- How to get the DOM node from a Class Component ref with the React.createRef() API
- How to use react ref to get value from html select element?
- How to Call selector function from React Component?
- How to retrieve ref from hoc translated component by i18next
- How to use selectById selector generated from createEntityAdapter
- How to make my component re render after updating props from selector in react and redux-saga?
- How to target a ref inside a component from another component?
- How to properly type a custom selector function, which picks properties from an object
- How to Dynamically set the attributes of a component, from users input?
- React Redux - How to access a structured selector from a static function?
- How to Map the Buffer TimeRange Data From an HTML5 Video Player Ref to a Progress Bar?
- How to properly forward a ref to a material-ui component from a functional component
- Activate Modal from parent component, child ref is undefined, how to without lifting the state?
- How do I change the style of an element through another element selector with withStyle from materialUI
- How to move CSS from a '::before' selector into React?
- How to read the ref code from URL in react js
- How to make a React component that accepts value like a HTML tag instead of taking it from attributes
- ReactJs: How to get ref of a component whose ref comes from its parent
- how to add ref from forwardref component without rendering?
- React: How to get the ref height of an element coming from the children with dynamic height?
- How to get custom data attributes values in `MenuItem` from `Select` in material ui?
- How to access child ref from parent without fowardRef
- Get multiple attributes from a single selector in Puppeteer
More Query from same tag
- NPM ERROR: EINTEGRITY: Integrity checksum failed using sha 512
- React JS Material UI DataGrid: how to join data between multiple table?
- Confused about this compiler error in my react app
- Webpack not rendering any content on localhost. It is attaching the script tag in html but nothing is displayed on the homepage
- React: How to solve the error: Object is of type 'unknown'?
- Why Defining A React Component Constructor the ES6 Way Won't Work?
- Getting one of the object value/state inside of an array
- How set state with events?
- Authorization request works in Postman but not in React
- Bing Maps in React JS - Component doesn't Load when props change
- How to pass the variable value which is a function to the calling
- Changing Variable in React
- What is the difference between "dynamic import" and regular import in react?
- how to grap the content of an array inside an array of objects
- Typescript set object key by variable on an interface
- trying to display the input values but nothing shows up with no error in console reactjs
- How do I import npm package 'tiktok-livestream-chat-connector' in react TS?
- How to make the span text not to be pushed to next line based on the preceding span element content using css?
- How to convert a Laravel project, to a laravel api?
- react useEffect clean up function
- Smooth wrapper background-image transition, when using React onMouseEnter and onMouseLeave events on a childs
- Accessing data from url in real time search using Reactjs and ajax
- Absolute Imports: React and Typescript
- Showing loading indicator while writing data to Firestore
- Update state when imported variable changes using react hooks
- Response not rendering from axios get request in react
- CSS div background-color bug on chrome?
- Pass Current Table Row values to a subcomponent with onClick of a button in React (Material UI)
- NodeJS + ExpressJS: Request header field not allowed by Access-Control-Allow-Headers in preflight response
- Using react-rnd with react hooks