反應：如何在父組件中使用子組件的ref？

我會在這裏更好地解釋我的自我，例如我有2個組件1將Modal 2將成爲Form。反應：如何在父組件中使用子組件的ref？

Modal將具有狀態，它將傳遞給Form的函數。窗體應該有它自己的參考。 Modal可以使用。我試圖說明：

class Modal extends Component { 

handleSubmit(e) { 
    e.preventDefault(); 
    if ($(this.refs.form).form('is valid') { 
    //Do something... 
    } 
} 

render() { 
    return (
    <Form ref="form" handleSubmit={::this.handleSubmit} /> 
) 
} 
} 

class Form extends Component { 
render() { 
    return (
    <form onSubmit={this.props.handleSubmit} ref={this.props.ref}> 
    //Inputs go here... 
    </form 
) 
} 
}

現在我們在模態分配不起作用裁判......我們可以使用表格裁判只有在表單組件....我怎麼能分享？

來源

2016-08-30 Ilan Hasanov

爲什麼不只是將'this'傳遞給handleSubmit作爲參數？然後用ReactDOM.findDomNode你可以找到它並驗證。因爲你的方法是錯誤的。您可以更好地創建HOC並在其中添加方法 – havenchyk

'$（this.refs.form）.form' jquery o_O？你可以使用'e.target'，但它有時會破壞封裝等。你應該更好地處理'Form'中的驗證 –

如果你真的需要這樣的：

class Modal extends Component { 

handleSubmit(e) { 
    e.preventDefault(); 
    if(this._form._inner.state.isValid) { 
    //Do something... 
    } 
} 

render() { 
    return (
    <Form ref={c => this._form = c} handleSubmit={this.handleSubmit} /> 
) 
} 
} 

class Form extends Component { 
state = { 
    isValid: false 
} 

render() { 
    return (
    <form onSubmit={this.props.handleSubmit} ref={c => this._inner = c}> 
    //Inputs go here... 
    </form> 
) 
} 
}

但你應該嘗試建立與回調組件和做的東西在那裏。

最好嘗試這樣的事：

class Modal extends Component { 

handleSubmit(isValid) { 
    //... do stuff 
} 

render() { 
    return (
    <Form handleSubmit={this.handleSubmit} /> 
) 
} 
} 

class Form extends Component { 

constructor(props) { 
    super(props); 
    this.onSubmit = this.onSubmit.bind(this); 
} 

validate() { 
    // ... validate 
    this.setState({ isValid: ... }); 
} 

onSubmit() { 
    const { handleSubmit } = this.props; 


    if(handleSubmit) { 
    handleSubmit(this.state.isValid); 
    } 
} 

render() { 
    return (
    <form onSubmit={this.onSubmit}> 
    //Inputs go here... 
    </form> 
) 
} 
}

如果你使用做出反應，你應該RLY擺脫的jQuery。過載的位..

來源

2016-08-30 13:47:48 Inoir

反應：如何在父組件中使用子組件的ref？

回答

相關問題