score:3
you can't bind this
in arrow functions. this
falls through to the parent scope.
you could make it a non-arrow function:
function handleinputchange(key, value) { this.setstate(key: value) }
but i'd suggest making it a method on the class. defining a function that references this
is tricky to read, because you never know what this
will be when it executes, making it hard to read the function at a glance.
score:0
since you are calling this function inside the class, it's better to define it as a method within the class instead of defining it outside, so that the this
issue is less of a, well, issue.
inside the class makes it fairly straightforward:
constructor(props) {
this.handleinputchange = this.handleinputchange.bind(this)
}
handleinputchange() {
//code
}
or if you want to avoid having to do the messy bind
method, you can use an arrow function for the method:
handleinputchange = () => {
console.log('this is: ', this);
}
...
render() {
return(
<button onclick={this.handleinputchange}>click</button>
);
}
reference react handling events
score:1
arrow functions do not have their own this, if you use call([this obj], args)
, apply([this obj], args)
, any "this" argument is ignored. i guess the same applies to bind(obj)
, it doesn't bind this to the object you provided because it doesn't have its own this.
this
inside arrow functions is decided by this
in the lexical scope where the arrow function is defined. if you define your handleinputchange
in global scope, this
inside is the global object(in browser it's window), that's the reason you get the error.
if you want to use bind
, you can define the function like this
function handleinputchange(key, value) { this.setstate(key: value) }
when you call bind
, this
will be set to the object you provided in bind
.
Source: stackoverflow.com
Related Query
- How to convert a React Class Component to a Function Component this project
- Invalid hook call. Hooks can only be called inside... how to fix this maintaining the react class component
- How to bind functional React component to class events
- How to prevent this React JS Class Component setState error?
- How to write this code in a class component using react
- How to convert this React Class Component to a Function Component
- How can I convert the this cascading dropdown class component to functional one using React Hooks?
- Functions are not valid as a React child. This may happen if you return a Component instead of from render
- How to declare defaultProps on a React component class using TypeScript?
- How do I export more than one class component with React JS?
- Unable to use Arrow functions inside React component class
- How to write an ES6 class React Component that extends a functional component?
- How unperformant are anonymous functions in React component attributes?
- How do I call firebase functions from within a react component
- How to get a React Component reference to change its class using classList?
- How to test default props functions is attached to component or not ? | React | Jest | Enzyme
- How to properly type a React ErrorBoundary class component in Typescript?
- How to test functions other than render in a React class using jest?
- How to bind "this" for react component method
- React - Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render
- How do I test component methods on a React component that are defined as arrow functions (class properties)?
- How to access props outside of a class component React
- How to use React Context inside function of Class component
- How to bind a function of a React component to "this" without a constructor?
- How to bind this to React ES6 getter and setter functions?
- How to extend React component class created via React.createClass
- How to pass this TypeScript React component an optional prop?
- how to bind in react functional component ? .bind(this) not working
- how to set react parent component state by a async function and then pass this state to child as props?
- How to rewrite class component to React Functional?
More Query from same tag
- Reactjs Antd library and google maps Places
- how to customize react material ui next component
- How can I do a simple AJAX call to play audio via React / Redux?
- Html2canvas vs jspdf can't export svg in PDF file
- How to dispatch to store from a file that isn't imported anywhere and returns nothing
- How to list items in a list and remove duplicates in ReactJS?
- Electron is not defined
- useEffect renders more than once even with empty dependency list
- How to make the first option unselected while the component is rendered in select with multiple?
- How to write test cases for tabs in material-ui using react testing library
- How to hide certain Components for some Routes
- unable to understand how component is passed to child element and how render method works in React.js
- Possible to have Storybook knobs toggle between string and null?
- Unable to convert BLOB to base64
- Redux connect() with multiples actions / states
- What is the purpose of boolean values for the breakpoint props (xs, sm, md...) in material-ui
- Align item on the center and on its end right
- return is not working in async await function in react js
- React pass props from multiple arrays in state
- React - TypeError: Cannot read property of undefined
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How can I divide this Object.values with the total?
- How to expand Material UI accordion on mouse over
- Strikethrough a list item in react todo list
- Node.js (Express) Dynamically Inserting Meta Tags Error: Uncaught SyntaxError: Unexpected token '<'
- Changing rest output in json format from snake case to camel case in react web app
- When can we expect React's new Time-Slicing Asynchronous rendering feature?
- Component is not re-rendering after state changed
- Accessing URL Parameters in Meteor-React's createContainer
- sending results from node.js to react