0

我有很多命中，一旦按下命中，我想将它们添加到数组中。但是，据我观察，该数组看起来像是获得了命中的名称，即值。该值在半秒内消失了。

我尝试过诸如构建构造函数之类的方法，并执行诸如

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 方法。

4

1 回答 1

0

您可以简单地将 hit.name 值传递给箭头函数。

完整的工作代码示例（简单粘贴到codesandbox.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 的使用！这是修改状态时的最佳实践。你可以google一下为什么！

  • 您应该在 render 方法之外定义 HitComponent 组件。每次渲染组件时都不需要重新定义它！

于 2019-06-04T09:44:34.840 回答