В React, как синхронизировать 2 входных состояния полей поиска, когда реквизиты изменяются с помощью приставки

Question

Я создал многократно используемый компонент SearchBox, который получает 3 реквизита

1. onSearchInputChanged: функция, запускаемая при поиске чего-либо
2. Держатель: строки типа «поиск студентов»
3. searchString: инициализировать поле поиска с помощью этой строки.

Функция, переданная в onSearchInputChanged, вызывает API через SagX и сохраняет данные в Redx.то есть он проходит через 2 состояния SEARCH_REQUEST, SEARCH_SUCCESS, где обновляются строка поиска и результат поиска.

В том же поисковом окне на домашней странице и в модальном.Если у вас есть 2 экземпляра полей поиска, как мы синхронизируем строку поиска в состоянии 2 экземпляров и строку поиска в редукте?

<SearchBox
  searchString={search_reducer.searchString}
  placeHolder={'Search students in home page'}
  onSearchInputChange={value => this.props.searchStudents({ searchString: value })}
/>

<SearchBox
  searchString={search_reducer.searchString}
  placeHolder={'Search students in modal'}
  onSearchInputChange={value => this.props.searchStudents({ searchString: value })}
/>

import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
import { Input, InputGroup } from 'reactstrap';
import debounce from 'lodash.debounce';
import './SearchBox.css';

export class SearchBox extends Component {
  static propTypes = {
    onSearchInputChange: PropTypes.func,
    placeHolder: PropTypes.string.isRequired,
    searchString: PropTypes.string
  };
  constructor(props) {
    super(props);
    this.state = {
      searchParam: ''
    };
    this.changed = debounce(val => this.props.onSearchInputChange(val), 250);
  }

  onSearchChange = event => {
    if (event.target !== null) {
      const val = event.target.value;
      this.setState({ searchParam: val }, () => {
        this.changed(val);
      });
    }
  };

  componentDidMount() {
    if (this.props.searchString !== this.state.searchParam) {
      this.setState({ searchParam: this.props.searchString });
    }
  }

  render() {
    return (
      <div className="searchBoxContainer">
        <div className="searchInputGroup">
          <InputGroup className="inputGroup">
            <i className="searchIcon" />
            <Input
              value={this.state.searchParam}
              type="search"
              placeholder={this.props.placeHolder}
              className="searchInput"
              onChange={this.onSearchChange}
            />
          </InputGroup>
        </div>
      </div>
    );
  }
}

export default SearchBox;

Answer 1

Я бы напрямую получил доступ к состоянию магазина приставок.вы уже должны получать это состояние в своих подпорках, поэтому вам не нужно полагаться на setState () в ваших компонентах.Допустим, ваш фрагмент избыточного состояния для поискового компонента называется «поиск».Таким образом, в вашем компоненте, подключенном к редуксу, у вас будет что-то вроде:

const mapStateToProps = ({ search }) => {

, если это так, то вы получите к нему доступ в своем компоненте как this.props.search.searchString