onChange 和 setState 在我的代码中不能一起工作

Question

我正在尝试构建一个搜索框。但是，当我想在输入内容时设置状态时，该框只是不允许我输入任何内容。

这是调用搜索框组件的类

export default class Tagsearch extends Component {

  constructor(props) {

    super(props);

    this.state = {

      hitsDisplay:false,

      inputContent:"",

      tags:[]

    };

  }

  openDisplay = () => {

    console.log("open")

    // this.setState({ hitsDisplay: true })

  }

  closeDisplay = () => {

    console.log("close")

    // this.setState({ hitsDisplay: false })

  }

  render() {

    let inputTags = (

      this.state.tags.map((tag, i) => 

        <li key={i} style={styles.items}>

          {tag}

          <button onClick={() => this.handleRemoveItem(i)}>

            (x)

          </button>

        </li>

      )

    )

    let result = (

      <div className="container-fluid" id="results">

      </div>

    )

    if (this.state.hitsDisplay) {

      result = (

        <div className="container-fluid" id="results">

          <div className="rows">

            <MyHits handleSelect={this.handleSelect}/>

          </div>

          <div className="rows">

            <Pagination />

          </div>

        </div>

      )

    }

    return (

      <InstantSearch

        appId="*******"

        apiKey="***********************"

        indexName="tags"

      >

        {inputTags}

        <SearchBox  

          connectSearchBox={connectSearchBox}

          openDisplay={this.openDisplay}

          closeDisplay={this.closeDisplay}

        />

        {result}

      </InstantSearch>

    )

  }

}

下面是搜索框组件

const SearchBox = props => {

  let { 

    connectSearchBox,

    openDisplay,

    closeDisplay

  } = props;

  const CustomSearchBox = connectSearchBox(({ currentRefinement, refine }) => {

    const handleChange = (e, refine) => {

      refine(e.target.value)

      // console.log(e.target.value)

      if (e.target.value !== "") {

        openDisplay();

      } else {

        closeDisplay();

      }

    }

如果我在 open & closeDisplay 中评论两个 setState，它工作正常，它会相应地打印出打开和关闭。但是，一旦我启用了 setState，输入框就不允许我输入任何内容。

Answer 1

你的代码写错了。connectSearchBox旨在将组件连接到 Algolia api。这是对组件定义的一次性设置。它返回一个高阶组件，该组件使用 api 功能包装给定组件。您可以在此处查看源代码。通过将您的自定义 SearchBox 放在 SearchBox 函数中，您会导致组件在每个 render() 循环中重新构建和重新连接，从而不会保留状态。这就是为什么一旦您setState的搜索文本消失。import { connectSearchBox } from 'react-instantsearch-dom';const CustomSearchBox = ({ currentRefinement, refine, openDisplay, closeDisplay, ...props }) => {&nbsp; &nbsp; const handleChange = (e, refine) => {&nbsp; &nbsp; &nbsp; refine(e.target.value)&nbsp; &nbsp; &nbsp; if (e.target.value !== "")&nbsp; &nbsp; &nbsp; &nbsp; openDisplay();&nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; closeDisplay();&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; <ul style={styles.container}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={styles.input}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={currentRefinement}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={e => handleChange(e, refine)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; )&nbsp; })export default connectSearchBox(CustomSearchBox);用法import CustomSearchBox from './CustomSearchBox'...&nbsp; &nbsp; &nbsp; &nbsp;<CustomSearchBox&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; openDisplay={this.openDisplay}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; closeDisplay={this.closeDisplay}&nbsp; &nbsp; &nbsp; &nbsp; />文档中的用法示例。我认为您想要实现的是将 props 传递给您的组件，但connectSearchBox已经保证您传递给 HOC 的任何 props 也会传递到您的自定义搜索框。