Question

我已经创建了可接收3个道具的SearchBox可重用组件

onSearchInputChanged：搜索某些内容时要运行的功能
持和平者：类似“搜索学生”的字符串
searchString：使用此字符串初始化搜索框

传递给onSearchInputChanged的

函数通过redux sagas调用api并将数据存储在redux中。也就是说，它会经历两种状态SEARCH_REQUEST，SEARCH_SUCCESS，其中更新了搜索字符串和搜索结果。

要在主页和模式中使用相同的搜索框。当您有2个搜索框实例时，如何在2个实例状态下同步搜索字符串并在redux中同步搜索字符串？

<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

我将直接访问redux存储的状态。您应该已经在道具中接收到了该状态，因此您无需在组件中依赖setState（）。假设您的搜索组件的redux状态切片称为“搜索”。因此，在您的redux连接的组件中，您将具有以下内容：

const mapStateToProps = ({ search }) => {

如果是这样，那么您将在组件中以this.props.search.searchString

的身份访问它

在React中，当道具通过redux更改时如何同步搜索框的2个输入状态

1 个答案: