Очистить состояние от родителя с дочерним компонентом - PullRequest
Новая
       22

Очистить состояние от родителя с дочерним компонентом

0 голосов
/ 10 июля 2020

У меня есть два компонента на основе class.

Родительский компонент: Приложение 

import React, { Component } from 'react';
import Navbar from './Navbar';
import SearchBar from './SearchBar';

class App extends Component {
    state = {
        search: ''
    }

    getSearchFromSearchBar = (searchBarData) => {
        this.setState({ search: searchBarData })
    }

    render() {
        return (
            <div>
                <Navbar />
                <div className='section'>
                    <div className='container'>
                        <h1 className='title has-text-weight-light is-size-2' style={{ fontFamily: 'Bungee' }}>Search a video</h1>
                        <SearchBar onUserClick={this.getSearchFromSearchBar} search={this.state.search} />
                        <p>
                            Parent: {this.state.search}
                        </p>
                    </div>
                </div>
            </div>
        )
    }
}


export default App;

Дочерний компонент: SearchBar 

import React, { Component } from 'react';

class SearchBar extends Component {
    state = {
        search: ''
    }

    handleClick = async (event) => {
        event.preventDefault();
        this.props.onUserClick(this.state.search)
    }

    getUserInput = async (event) => {
        this.setState({ search: event.target.value })
    }

    render() {
        return (
            <div className='row'>
                <div className='field has-addons'>
                    <div className='control has-icons-left is-expanded'>
                        <input className="input is-medium" value={this.state.search} onChange={this.getUserInput} id="search" type="text"></input>
                        <span className="icon is-small is-left">
                            <i className="fas fa-search"></i>
                        </span>
                    </div>
                    <p className='control'>
                        <button className={`button is-info is-medium`} onClick={this.handleClick}>
                            <span className={`icon`}>
                                <i className='fas fa-search'></i>
                            </span>
                            <span style={{ fontFamily: 'Bungee' }}>
                                Search
                            </span>
                        </button>
                    </p>
                    <p className='control'>
                        <button className={`button is-danger is-medium`} onClick={() => this.setState({ search: '' })}>
                            <span className={`icon`}>
                                <i className='fas fa-search'></i>
                            </span>
                            <span style={{ fontFamily: 'Bungee' }}>
                                Clear
                            </span>
                        </button>
                    </p>
                </div>

            </div>
        )
    }
}


export default SearchBar;

Я пытаюсь удалить state из родительского компонента, когда пользователь нажимает кнопку clear. Мне сложно это делать, потому что я не могу отправлять аргументы при вызове this.handleClick на JSX. Есть ли способ обойти это?

Я также управляю двумя состояниями, это правильный подход? Я пробовал использовать реквизиты, но не могу их изменить, так как это свойство только для чтения.

1 Ответ

1 голос
/ 10 июля 2020

Два состояния - это нормально. Состояние вашего ребенка поддерживает текст во входных данных. Состояние вашего родителя - это фактический термин, который пользователь искал, верно? Я бы назвал их по-разному, чтобы было понятно, что у них разные цели, например, searchedTerm в родительском элементе и value в дочернем или что-то в этом роде. Одно изменяется при каждом нажатии на клавиатуре (значение в дочернем элементе, отображаемом во вводе), другое состояние - это фактический термин, который пользователь хочет найти (после щелчка).

Вы можете абсолютно передавать аргументы функции. 

<button className={`button is-info is-medium`} onClick={() => this.handleClick(this.state.search)}>

Обратите внимание, я возвращаю функцию .... которая вызывает функцию, которую вы передали в props. Это не обязательно для вас, поскольку ваша функция принимает событие и уже делает это.

Теперь ... вы упомянули, что хотите очистить состояние в родительском компоненте, я не уверен, зачем вам хотите отправить аргумент, но вы просто передадите функцию дочернему элементу. у дочернего элемента будет свойство с именем clearClicked, и дочерний элемент будет запускать его при нажатии кнопки.

Ребенок: 

 <button className={`button is-danger is-medium`} onClick={() => { 
   this.setState({ search: '' });
   clearClicked(); // the function passed down as a prop
  }
 >

Родитель: 

  <SearchBar onUserClick={this.getSearchFromSearchBar} 
    search={this.state.search} 
    clearClicked={() => this.setState({ search: '' })} 
  />
...