Поднятие сообщения в РЕАКТ

Question

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

родительский класс:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activities: activities,
            filteredActivities: activities,
        };
        this.handleSearchChange = this.handleSearchChange.bind(this);
    }

    filterActivity = searchText => {
        return this.state.activities
        .filter(activity => {
            if(activity.content.toLowerCase().includes(
                searchText.toLowerCase())
            ){
                return true;
            }
            return false;
        });
    }

    handleSearchChange = event => {
        this.setState({
            filteredActivities: this.filterActivity(event.target.value)
        });
    };

    render() {
        const filteredActivities = this.props.filteredActivities;
        return(
            <div className="notificationsFrame">
                <div className="panel">
                    <Header name={this.props.name} />
                    <SearchBar onChange={this.handleSearchChange} />
                    <Content activities={this.state.filteredActivities} />
                </div>
            </div>
        );
    }
}

Дочерний класс:

class SearchBar extends React.Component {
    onChangeHandler = event => {
        console.log(event.target.value);
    }
    render() {
        return (
            <div className="search-bar" >
                <input type="text" onChange={this.onChangeHandler} />
            </div>
        );
    }
}

Я хочу передать значение event.target.value для handleSearchChange. если я добавлю код класса Searchbar в класс App, я смогу выполнить поиск в реальном времени очень хорошо. Но я не могу поместить их в два компонента. Я хочу сделать их на две составляющие. Большое спасибо.

Answer 1

класс SearchBar extends React.Component {

/* onChangeHandler = event => {   
    console.log(event.target.value);
} */
render() {
    const { onChange } = this.props;
    return (
        <div className="search-bar" >
            <input type="text" onChange={onChange} />
        </div>
    );
}

}

Вы можете попробовать это, поскольку вы уже приняли событие в качестве параметра в родительском классе для метода handleSearchChange

Answer 2

Должно быть так просто: -

Дочерний класс:

class SearchBar extends React.Component {
  onChangeHandler = event => {
    this.props.inputChanged(event.target.value);
  }
  render() {
      return (
          <div className="search-bar" >
              <input type="text" onChange={this.onChangeHandler} />
          </div>
      );
  }
}

Родительский класс:

handleSearchChange = inputValue => {
  this.setState({
      filteredActivities: this.filterActivity(inputValue)
  });
};

JSX родительского класса:

<SearchBar inputChanged={this.handleSearchChange} />

, так как вы уже передаете ссылку на функцию в качестве реквизита, вы можете получить к ней доступ с помощью this.props.propName и вызвать ее.