我正在ES6中编写一个简单的组件(使用BabelJS)，并函数此。setState不工作。
典型的错误包括
无法读取undefined的属性“setState”
or
这一点。setState不是一个函数
你知道为什么吗?代码如下:
import React from 'react'
class SomeClass extends React.Component {
constructor(props) {
super(props)
this.state = {inputContent: 'startValue'}
}
sendContent(e) {
console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
}
changeContent(e) {
this.setState({inputContent: e.target.value})
}
render() {
return (
<div>
<h4>The input form is here:</h4>
Title:
<input type="text" ref="someref" value={this.inputContent}
onChange={this.changeContent} />
<button onClick={this.sendContent}>Submit</button>
</div>
)
}
}
export default SomeClass
您的函数需要绑定，以便使用事件处理程序中的状态或道具
在ES5中，只在构造函数中绑定事件处理函数，而不直接在呈现中绑定。如果你直接在渲染中绑定，那么每次你的组件渲染和重新渲染时，它都会创建一个新函数。所以你应该总是在构造函数中绑定它
this.sendContent = this.sendContent.bind(this)
在ES6中，使用箭头函数
当你使用箭头函数时，你不需要做绑定，你也可以远离范围相关的问题
sendContent = (event) => {
}
您的函数需要绑定，以便使用事件处理程序中的状态或道具
在ES5中，只在构造函数中绑定事件处理函数，而不直接在呈现中绑定。如果你直接在渲染中绑定，那么每次你的组件渲染和重新渲染时，它都会创建一个新函数。所以你应该总是在构造函数中绑定它
this.sendContent = this.sendContent.bind(this)
在ES6中，使用箭头函数
当你使用箭头函数时，你不需要做绑定，你也可以远离范围相关的问题
sendContent = (event) => {
}
Bind (this)可以解决这个问题，现在如果你不喜欢使用Bind，我们可以使用另外两种方法来实现这个目标。
1)和传统的方法一样，我们可以在构造函数中使用bind(this)，这样当我们使用函数作为JSX回调时，this的上下文就是类本身。
class App1 extends React.Component {
constructor(props) {
super(props);
// If we comment out the following line,
// we will get run time error said `this` is undefined.
this.changeColor = this.changeColor.bind(this);
}
changeColor(e) {
e.currentTarget.style.backgroundColor = "#00FF00";
console.log(this.props);
}
render() {
return (
<div>
<button onClick={this.changeColor}> button</button>
</div>
);
}
}
2)如果我们将函数定义为带有箭头函数的类的属性/字段，我们就不需要再使用bind(this)了。
class App2 extends React.Component {
changeColor = e => {
e.currentTarget.style.backgroundColor = "#00FF00";
console.log(this.props);
};
render() {
return (
<div>
<button onClick={this.changeColor}> button 1</button>
</div>
);
}
}
3)如果我们使用箭头函数作为JSX回调，我们也不需要使用bind(this)。更进一步，我们可以传递参数。看起来不错，不是吗?但它的缺点是性能问题，详情请参阅ReactJS doco。
class App3 extends React.Component {
changeColor(e, colorHex) {
e.currentTarget.style.backgroundColor = colorHex;
console.log(this.props);
}
render() {
return (
<div>
<button onClick={e => this.changeColor(e, "#ff0000")}> button 1</button>
</div>
);
}
}
我已经创建了一个代码依赖来演示这些代码片段，希望它能有所帮助。
我的建议是使用箭头函数作为属性
class SomeClass extends React.Component {
handleClick = () => {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}
}
不要使用箭头函数
class SomeClass extends React.Component {
handleClick(){
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={()=>{this.handleClick}}></button>
);
}
}
因为第二种方法每次渲染调用都会生成新函数，实际上这意味着新指针和新版本的道具，如果你以后会关心性能，你可以使用React。PureComponent或React中。组件你可以覆盖shouldComponentUpdate(nextProps, nextState)和浅检查道具到达时
这个问题是我们大多数人在从React.createClass()组件定义语法过渡到扩展React.Component的ES6类方式时最先经历的事情之一。
这是由React.createClass()与extends React.Component中的上下文差异引起的。
使用React.createClass()将自动正确绑定此上下文(值)，但在使用ES6类时并非如此。当以ES6的方式(通过扩展React.Component)执行时，此上下文默认为空。类的属性不会自动绑定到React类(组件)实例。
解决该问题的方法
我一共知道4种一般的方法。
Bind your functions in the class constructor. Considered by many as a best-practice approach that avoids touching JSX at all and doesn't create a new function on each component re-render.
class SomeClass extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}
}
Bind your functions inline. You can still find this approach used here and there in some tutorials / articles / etc, so it's important you're aware of it. It it the same concept like #1, but be aware that binding a function creates a new function per each re-render.
class SomeClass extends React.Component {
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick.bind(this)}></button>
);
}
}
Use a fat arrow function. Until arrow functions, every new function defined its own this value. However, the arrow function does not create its own this context, so this has the original meaning from the React component instance. Therefore, we can:
class SomeClass extends React.Component {
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={ () => this.handleClick() }></button>
);
}
}
or
class SomeClass extends React.Component {
handleClick = () => {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}
}
Use utility function library to automatically bind your functions. There are a few utility libraries out there, that automatically does the job for you. Here are some of the popular, just to mention a few:
Autobind Decorator is an NPM package which binds methods of a class to the correct instance of this, even when the methods are detached. The package uses @autobind before methods to bind this to the correct reference to the component's context.
import autobind from 'autobind-decorator';
class SomeClass extends React.Component {
@autobind
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}
}
Autobind Decorator is smart enough to let us bind all methods inside a component class at once, just like approach #1.
Class Autobind is another NPM package that is widely used to solve this binding issue. Unlike Autobind Decorator, it does not use of the decorator pattern, but really just uses a function inside your constructor that automatically binds the Component's methods to the correct reference of this.
import autobind from 'class-autobind';
class SomeClass extends React.Component {
constructor() {
autobind(this);
// or if you want to bind only only select functions:
// autobind(this, 'handleClick');
}
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}
}
PS: Other very similar library is React Autobind.
建议
如果我是你，我会坚持第一种方法。但是，一旦您的类构造函数中有大量的绑定，我建议您研究方法#4中提到的helper库之一。
其他
这与你的问题无关，但你不应该过度使用裁判。
你的第一个倾向可能是使用refs在你的应用中“让事情发生”。如果是这种情况，花点时间，更批判性地思考在组件层次结构中应该在哪里拥有状态。
对于类似的目的，就像您需要的一样，使用受控组件是首选的方法。我建议您考虑使用Component状态。所以，你可以像这样访问这个值:this.state. inputcontent。
