zoukankan      html  css  js  c++  java
  • TypeError: instance.render is not a function

    1、错误描述

    2、错误原因

    import React, {Component} from 'react';
    import {render} from 'react-dom';
    import Button from 'react-bootstrap/Button'
    
    class InputRead extends Component {
    	constructor() {
    		return { user: '' };
    	}
    	
    	inputChange(e) {
    		this.setState({user:e.target.value});
    	}
    	
    	clearAndFocus() {
    		this.setState({user:''},()=>{
    			this.refs.thisInput.focus();
    		})
    	}
    	
    	render() {
    		return (
    			<div>
    				<Button onClick={this.clearAndFocus.bind(this)}>
    					清空
    				</Button>
    				<input ref="thisInput" value={this.state.user} onChange={this.inputChange.bind(this)}/>
    			</div>
    		)
    	}
    }
    
    export default InputRead;

      构造函数中不能使用return语句,否则以为构造函数中需要添加render()方法

    3、解决办法

    import React, {Component} from 'react';
    import {render} from 'react-dom';
    import Button from 'react-bootstrap/Button'
    
    class InputRead extends Component {
    	constructor(props) {
    		//return { user: '' };
    		super(props);
    		this.state = { user: '' };
    	}
    	
    	inputChange(e) {
    		this.setState({user:e.target.value});
    	}
    	
    	clearAndFocus() {
    		this.setState({user:''},()=>{
    			this.refs.thisInput.focus();
    		})
    	}
    	
    	render() {
    		return (
    			<div>
    				<Button onClick={this.clearAndFocus.bind(this)}>
    					清空
    				</Button>
    				<input ref="thisInput" value={this.state.user} onChange={this.inputChange.bind(this)}/>
    			</div>
    		)
    	}
    }
    
    export default InputRead;
  • 相关阅读:
    Ubuntu16.04+GTX2070+Driver418.43+CUDA10.1+cuDNN7.6
    N皇后问题
    Linux Bash之通配符
    Linux Bash之正则表达式
    Linux Bash文本操作之grep篇
    Linux Bash文本操作之sed篇其二
    Integer对象两种创建方式的比较
    Class文件版本号
    group by、group_concat()、if()
    字节码命令与Java语言在语义描述能力上的差异
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13313710.html
Copyright © 2011-2022 走看看