3

Дана структура компонентов:

-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 <input type="text" onChange={this.handleChange} />; // (1)
    }
} 

class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit() {
        // При отправке нужно изменить содержимое поля ввода в строке (1)
    }

    render() {
        return (
            <div>
                <Search />
                <button onClick={this.handleSubmit} ></button>
            </div>
        );
    }
}
2
  • покажите код описывающий ваш случай, а то пугает слова "если input". Такое ощущение что Вы знаете о своей одержимости и страхуетесь на те случаи, когда за Вас писать код будет дьявол:)
    – user220409
    Commented 17 окт. 2016 в 20:11
  • К сожалению исходный код длинный, но я написал коротенький пример, где суть такая же: во время события в родительском элементе, потянуть значение из дочернего элемента
    – Monarch
    Commented 17 окт. 2016 в 21:00

1 ответ 1

3

Можно сделать это так:

Во-первых компоненту 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>
        );
    }
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.