英文:
Binding functions to instances of React function components
问题
我从https://legacy.reactjs.org/docs/faq-functions.html找到了这段代码片段，它将一个函数绑定到React组件的特定实例上：
class Foo extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
我可以使用函数组件做类似的事情吗？
我尝试在函数组件中使用此方法（将this.handleClick = this.handleClick.bind(this);移出构造函数），但是该语句中的this返回的是未定义，而不是函数组件。
英文:
I found this code snippet from https://legacy.reactjs.org/docs/faq-functions.html that binds a function to specific instances of a React component:
class Foo extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
Can I do something similar using function components instead?
I've tried this method in a function component (moving this.handleClick = this.handleClick.bind(this); out of the constructor), but this (in the statement) returned undefined instead of the function component.
答案1
得分: 1
Binding methods in React 不是你认为的那样。
this.someMethod.bind(this) 用于将方法绑定到类（而不是子组件），以便方法可以访问props和state。
当我们使用类属性时，这不再是必要的（使用箭头函数语法的方法）。
对于函数组件，这也完全无关紧要，因为当您的函数定义和使用在同一个函数组件中时，没有作用域问题。
所以这三种方式都是相同的：
class Foo extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick () {
console.log('clicked')
}
render() {
return <button onClick={this.handleClick}>click</button>
}
}
class Foo extends React.Component {
handleClick = () => { console.log('clicked') }
render() {
return <button onClick={this.handleClick}>click</button>
}
}
const Foo = () => {
const handleClick = () => { console.log('clicked') }
return <button onClick={handleClick}>click</button>
}
英文:
Binding methods in React isn't doing what it seems like you think it's doing.
this.someMethod.bind(this) was for binding the method to the class (not the child component), so the method has access to props and state.
When we got class properties, that wasn't necessary anymore (methods using arrow function syntax).
With function components, it's also completely irrelevant, because there's no scope issue when your function definition and use are in the same functional component.
So these three all do the same thing:
class Foo extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick () {
console.log('clicked')
}
render() {
return <button onClick={this.handleClick}>click</button>
}
}
class Foo extends React.Component {
handleClick = () => { console.log('clicked') }
render() {
return <button onClick={this.handleClick}>click</button>
}
}
const Foo = () => {
const handleClick = () => { console.log('clicked') }
return <button onClick={handleClick}>click</button>
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论