score:6
it would appear to be a bug (or at least an inconsistency) in reactstrap. with normal form
and button
elements, react consistently calls the handlers with no particular this
value¹ (so in this example, since class
code is always in strict mode, we see this
set to undefined
in the call):
class test extends react.component{
constructor(props){
super(props);
}
handleclick() {
console.log(typeof this);
}
handlesubmit(e) {
console.log(typeof this);
e.preventdefault();
}
render(){
return(
<react.fragment>
<form onsubmit={this.handlesubmit} >
<input type="submit" name="submit" value="submit" />
</form>
<button type="button" name="butt1" onclick={this.handleclick}>click</button>
</react.fragment>
);
}
}
reactdom.render(<test />, document.getelementbyid("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
but i have read that
this
inside normal functions is resolved dynamically i.e. who called it.
that's incorrect. with normal functions and with methods, the value of this
within the call is determined by the caller. so what i'm saying above is that react does one thing and reactstrap does something else.
you may be thinking of the dom and how it handles event handlers, which is different from both react and (apparently) reactstrap. the dom calls your handler with this
set to the element the handler was attached to. so if you attach a handler to a button
and the handler is a normal function or a method, this
will refer to the button
when the handler is called by the dom. it's just something the dom does. react doesn't. reactstrap apparently varies depending on what handler it is or what kind of element it is (which is likely a bug).
more about this
in this question's answers and in this old post on my anemic little blog.
in a comment you've said:
one more thing that i want to ask is how to use your code without strict mode, because it doesn't specify strict mode to be used
there are two reasons the code in that example is in strict mode:
- as i mentioned earlier in the answer, it's inside a
class
construct. code insideclass
is always strict. (so is code in a javascript module.) - it's using babel to transpile the jsx, and by default babel turns on strict mode in the code it outputs.
so to see what happens in loose mode, you'd have to not use a class
(easy enough) and not use babel, or at least tell babel not to turn on strict mode. i don't know if there's a way to tell babel not to use strict mode in stack snippets (there is a way when you're using it in the real world), but fortunately, you don't have to use jsx with react, it's just convenient. you can use react.createelement
directly:
const {createelement} = react;
function test() {
function handleclick() {
console.log(this === window);
}
function handlesubmit(e) {
console.log(this === window);
e.preventdefault();
}
return createelement(react.fragment, {
children: [
createelement("form", {
onsubmit: handlesubmit,
children: [
createelement("input", {
type: "submit",
name: "submit",
value: "submit"
})
]
}),
createelement("button", {
type: "button",
name: "butt1",
onclick: handleclick,
children: ["click"]
})
]
});
}
reactdom.render(createelement(test), document.getelementbyid("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
note that this
in the callbacks is now the global this
, because when you call a normal function or method with no particular this
value in loose mode, this
within the callback is the global this
(window
on browsers).
¹ that's even covered by react's event documentation, although what it actually says is that this
will be undefined
. that's only true in strict mode. it is, technically, possible — but not a good idea — to use react without using strict mode.
Source: stackoverflow.com
Related Query
- "this" is undefined for a form after submit but not for button in react
- React form not displaying the correct inputs on the screen after I click submit button
- How to have button in the form which check for required fields on submit but does not refresh the page?
- e.preventDefault not working when I trigger it from Submit button but working when triggered from onSubmit attribute in Form tag in React
- Formik React with 2 buttons (Submit and Save) to submit form - Save button not to trigger validation
- react enable button after all form fields are not empty
- When creating a form in React .map() does not populate select > options correctly, but works for a normal div
- Why is this React component state recognized in the JSX return() for the first <p> but not for the second <p>?
- React Webpack - Submit Button not retrieving input value on form submit
- How to disable a submit button in redux form for the second time after the form is submitted for the first time?
- React form not clearing inputs after submit POST
- react hook for submit button not changing data
- Try to get form data after submit in a React child component but empty screen
- I want to reset my form after clicking submit in reactjs. I have tried making another method. but it does not work
- Function not returning component after form submit in React
- How to make form not refresh with custom submit button in React
- Hidding a form with onBlur but this have a conflict with submit button
- REACT, form submit after preventDefault not working until submit button is clicked a second time
- Form submit not working for the React Food App
- How to submit a React form on <select> element change, but keep validation for other inputs in the form?
- clear controlled components in a form using react after clicking submit button
- the state inside hooks are not updated for first time on form submit in react
- Getting "You do not have permission to view this directory or page." after deployment on azure for react and node.js
- How do you submit a form after hiding the submit button in React
- React not updating data on parent component after child component form submit
- react hooks edit form does not select record to edit .the currentId is correct but record selected is undefined
- trying to render a button for a portal in react and get this error: × TypeError: Object(...) is not a function on the modalwrapper style
- React - clearing an input value after form submit
- React formik form validation: How to initially have submit button disabled
- React - "'value' prop on 'input' should not be null" for some input but not others
More Query from same tag
- REACT: How to build a half donut
- How do I get my Logo to show in my Navbar?
- React Hooks: How to make a POST request to server
- Enzyme unit testing onChange method using Material UI Components
- Unexpected token React-Redux
- Deno Oak Disable Cors
- Mapping nested array inside mapped array in React JSX
- Unable to fix React/NextJS memory leak using useEffect() and cleanup function
- what if we accidently don't use '()' after calling the method
- react.js bring component at top/before
- ReactJs :Error: Maximum update depth exceeded. React limits the number of nested updates to prevent infinite loops
- How to combine multiple stores as Root Store in Mobx and get access of in each other's fields and functions
- What is the best approach for adding class and styles without re-render - reactjs
- Does iOS has In App updates like feature as of Android?
- How do you map json in React?
- How to use Prism plugins with Docusaurus v2?
- div will not change size with CSS properties
- How to clear input field and reset select option after creating data in react
- Javascript function syntax with tripple =>
- change input based on props or state in react
- React js, confused on CSS file
- How to re-fetch MockProvider before a "fireEvent" from @testing-library/react?
- How to create a React.js new window popup
- Browser back does not work in reactjs application
- Map State in reactjs
- How to subscribe to state outside React component in Redux Toolkit?
- How to "clear mocks" for the "@testing-library/react" fireEvent?
- How to add inputs dynamically using Redux?
- How to convert data array object to file JSON and use this file to send requests to the S3 server in ReactJS?
- React Router: Active Link not matching the URL