鍍金池/ 問答/HTML/ react在組件render()中渲染兩次，第一次渲染成功，第二次返回的函數(shù)是u

react在組件render()中渲染兩次，第一次渲染成功，第二次返回的函數(shù)是undefine

我在寫一個(gè)登錄頁面的時(shí)候。
在父組件中寫的<LoginForm icon='mobile' onChange={()=>this.handleChange()}/>

在子組件內(nèi)用<input className='number-input' type={filetype} onChange={this.props.onChange} value={this.state.value}/>
為此是想獲取輸入框的值，然后在父組件內(nèi)寫入constuctor(){super(); this.state={value:''}}

但控制臺報(bào)錯(cuò)說value為空，然后我把子組件的value設(shè)為空，在控制器中給state.value一個(gè)值，就能夠打印出state.value的值，然后我在子組件內(nèi)render（）{}下，return之上打印this.props.onChange這個(gè)函數(shù)，在瀏覽器中打印了兩次，一次返回的是函數(shù)function，一次返回的undefine，請問這是什么問題，該如何解決啊。。。

回答
編輯回答
心沉

按你寫的這個(gè)沒有錯(cuò)??！能打印出來啊，

2017年2月8日 03:18
編輯回答
玄鳥
  • 父組件：
class LoginForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {value: ''}
    }
    
    render() {
        return(
            <SubForm value={this.state.value} onChange={value => this.changeHandle(value)}/>
        );
    }
    
    changeHandle(value) {
        this.setState({value});
    }
}
  • 子組件：
const SubForm = ({value, onChange}) => {
    return(
        <input value={value} onChange={e => onChange(e.target.value)}/>
    );
}
2017年8月8日 14:57