Можно сделать это так:
Во-первых компоненту Search
нужно добавить метод, который делает то, что нам нужно – сбрасывает значение text
.
resetText() {
this.setState({text: ''});
}
Во-вторых для того, чтобы вызвать этот метод из родительского компонента нужно добавить ref
на компонент Search
<Search 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 <input type="text" onChange={this.handleChange} />; // (1)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit() {
// При отправке нужно изменить содержимое поля ввода в строке (1)
this.refs.search.resetText();
}
render() {
return (
<div>
<Search ref='search' />
<button onClick={this.handleSubmit} ></button>
</div>
);
}
}
Другой (и более предпочтительный способ) способ решить задачу указанную в примере – хранить text
в State
родительского компонента App
и передавать его в Search
через props
. В этом случае через props
нужно также будет передать и setter для text
.
class Search extends React.Component {
render() {
return <input type="text" onChange={this.props.onChange} value={this.props.value}/>; (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 (
<div>
<Search value={this.state.text} onChange={this.handleSearchChange}/>
<button onClick={this.handleSubmit} ></button>
</div>
);
}
}