Question

我有很多匹配项，一旦按下匹配项，我想将它们添加到数组中。但是，据我观察，数组看起来像是命中的名称，即值。价值消失了大约半秒。

我尝试了诸如构造构造函数之类的方法，并且做了类似的事情

onClick={e => this.handleSelect(e)}
value={hit.name}
onClick={this.handleSelect.bind(this)}
value={hit.name}
onClick={this.handleSelect.bind(this)}
defaultValue={hit.name}

以此类推

export default class Tagsearch extends Component {

  constructor(props) {
    super(props);

    this.state = {
      dropDownOpen:false,
      text:"",
      tags:[]
    };

    this.handleRemoveItem = this.handleRemoveItem.bind(this);
    this.handleSelect = this.handleSelect.bind(this);
    this.handleTextChange = this.handleTextChange.bind(this);
  }

  handleSelect = (e) => {
    this.setState(
      { tags:[...this.state.tags, e.target.value] 
    });
  }


  render() {

    const HitComponent = ({ hit }) => {
      return (
        <div className="infos">
          <button 
            className="d-inline-flex p-2" 
            onClick={e => this.handleSelect(e)}
            value={hit.name}
          >
            <Highlight attribute="name" hit={hit} />
          </button>
        </div>
      );
    }

    const MyHits = connectHits(({ hits }) => {
      const hs = hits.map(hit => <HitComponent key={hit.objectID} hit={hit}/>);
      return <div id="hits">{hs}</div>;
    })

    return (
      <InstantSearch
        appId="JZR96HCCHL"
        apiKey="b6fb26478563473aa77c0930824eb913"
        indexName="tags"
      >

        <CustomSearchBox />
        {result}

      </InstantSearch>
    )
  }
}

基本上，我想要的是一旦按下相应的按钮，就将命中组件的名称传递给handleSelect方法。

Answer 1

您只需将hit.name值传递给箭头函数即可。

完整的工作代码示例（简单粘贴到codeandbox.io中）：

import React from "react";
import ReactDOM from "react-dom";

const HitComponent = ({ hit, handleSelect }) => {
    return <button onClick={() => handleSelect(hit)}>{hit.name}</button>;
};

class Tagsearch extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            tags: []
        };
    }

    handleSelect = value => {
        this.setState(prevState => {
            return { tags: [...prevState.tags, value] };
        });
    };

    render() {
        const hitList = this.props.hitList;

        return hitList.map(hit => (
            <HitComponent key={hit.id} hit={hit} handleSelect={this.handleSelect} />
        ));
    }
}

function App() {
    return (
        <div className="App">
            <Tagsearch
                hitList={[
                    { id: 1, name: "First" },
                    { id: 2, name: "Second" },
                    { id: 3, name: "Third" }
                ]}
            />
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

另外：

请注意prevState的使用！这是修改状态时的最佳做法。您可以搜索原因！
您应该在render方法之外定义HitComponent组件。不需要在每次渲染组件时都重新定义它！

为什么我不能在状态中向数组添加任何值？

1 个答案: