Передача данных родителя реагировать
Я новичок, чтобы реагировать и, следовательно, вопрос.
У меня есть родительский компонент-Домашняя страница с дочерним компонентом-боковой панелью.
Боковая панель моего дочернего компонента должна передать данные обратно родителю при нажатии кнопки submit, которую родитель должен опубликовать в api.
Это мой родительский компонент,
class HomePage extends React.Component{
constructor(props) {
.......
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(){
//Logic to get the data from the child and post to localhost:8080/
}
render(){
return(
<div className="col-md-2 left-pane">
<Sidebar handleSubmitButton={this.state.handleSubmit}/>
</div>
);
}
}
Это мой дочерний компонент,
class Sidebar extends React.Component {
handleSubmitButton(event) {
event.preventDefault();
}
render() {
return (
<div>
<input type="text"/>
<button type="button" className="btn btn-info btn-icons" onClick={this.props.handleSubmitButton} >
<span className="glyphicon glyphicon-send" aria-hidden="true"/>
</button>
</div>
);
}
}
Sidebar.propTypes = {
handleSubmitButton: React.PropTypes.func
};
Мой вопрос в том, как мне захватить входной текст с помощью метода onclick на боковой панели нажмите кнопку и передайте его родителю для публикации это по api. Любая помощь ценится.
3 ответов:
В дочернем компоненте можно создать свойство для атрибута ref. Прямой доступ к элементам DOM обычно осуществляется путем установки ссылок.
В Родительском компоненте можно использовать функцию стрелки с обратным вызовом, которая позволяет получить доступ к элементу
<input>DOM в любом месте родительского компонента, просто введя это.textInputДополнительную информацию о refs можно найти в официальной документации React: https://facebook.github.io/react/docs/refs-and-the-dom.html
Родительский компонент:
handleSubmit() { console.log(this.textInput.value); } <Sidebar inputRef={(input) => this.textInput = input} handleSubmitButton={this.state.handleSubmit} />Дочерний компонент:
<input ref={this.props.inputRef} type="text"/>
Ваш родительский компонент не должен обращаться непосредственно к входным данным, а скорее полагаться на дочерний компонент для передачи любых значений родительскому компоненту, когда это требуется.
class HomePage extends React.Component { constructor(props) { this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(textInputValue){ // The callback passed to the child component will // submit the data back to it's parent. // Logic to post to localhost:8080/ } render(){ return( <div className="col-md-2 left-pane"> <Sidebar handleSubmitButton={ this.handleSubmit }/> </div> ); } } class Sidebar extends React.Component { constructor(props) { this.handleSubmitButton = this.handleSubmitButton.bind(this); } handleSubmitButton(event) { event.preventDefault(); // By giving the input the `ref` attribute, we can access it anywhere const textInputValue = this.refs.input.value; // Submit the value to the parent component this.props.handleSubmitButton(textInputValue); } render() { return ( <div> <input type="text" ref="input" /> <button type="button" className="..." onClick={this.handleSubmitButton} > <span className="glyphicon glyphicon-send" aria-hidden="true"/> </button> </div> ); } }Это предотвращает соединение ваших компонентов вместе и облегчит тестирование позже.
Есть несколько способов сделать это. Во-первых, вы можете добавить событие onChange на вход для обновления состояния компонента боковой панели. Затем, когда обработчик отправки нажат, передайте значение из состояния и попросите домашнюю страницу handleSubmit () принять значение.
Другой способ-также передать onChange prop из компонента HomePage в боковую панель. Входные данные затем установят onChange на эту опору.
Comments