Как обратиться к дочернему элементу при определенном событии?

Дана структура компонентов:
-Component 1   -Component 1.1
Как в reactjs при событии в родительском компоненте, обратится к его дочернему компоненту и сделать его поле ввода пустым
class Search extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = {text: ''}; }
handleChange(event) { let text = event.target.value;
this.setState({ text }); }
render() { return ; // (1) } }
class App extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); }
handleSubmit() { // При отправке нужно изменить содержимое поля ввода в строке (1) }
render() { return (

); } }

Ответ

Можно сделать это так:
Во-первых компоненту Search нужно добавить метод, который делает то, что нам нужно – сбрасывает значение text
resetText() { this.setState({text: ''}); }
Во-вторых для того, чтобы вызвать этот метод из родительского компонента нужно добавить ref на компонент Search

Ну и наконец вызвать этот метод, обратившись к дочернем компоненту через this.refs
this.refs.search.resetText();
Вот код целиком:
class Search extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = {text: ''}; }
resetText() { this.setState({text: ''}); }
handleChange(event) { let text = event.target.value;
this.setState({ text }); }
render() { return ; // (1) } }
class App extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); }
handleSubmit() { // При отправке нужно изменить содержимое поля ввода в строке (1) this.refs.search.resetText(); }
render() { return (

); } }
Другой (и более предпочтительный способ) способ решить задачу указанную в примере – хранить text в State родительского компонента App и передавать его в Search через props. В этом случае через props нужно также будет передать и setter для text
class Search extends React.Component { render() { return ; (1) } }
class App extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.handleSearchChange = this.handleSearchChange.bind(this); this.state = {text: ''}; }
handleSubmit() { // При отправке нужно изменить содержимое поля ввода в строке (1) this.setState({text: ''}) }
handleSearchChange(event) { let text = event.target.value;
this.setState({ text }); }
render() { return (

); } }