Почему я не могу добавить какое-либо значение в массив в состоянии? - PullRequest
Новая
       23

Почему я не могу добавить какое-либо значение в массив в состоянии?

0 голосов
/ 04 июня 2019

У меня много обращений, которые я хочу добавить в массив после нажатия на нажатие.Однако, насколько я заметил, массив выглядел так, как будто получил название попадания, которое является значением.Значение ушло за полсекунды.

Я пробовал такие методы, как построение конструктора и такие вещи, как 

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 после нажатия соответствующей кнопки.

1 Ответ

0 голосов
/ 04 июня 2019

Вы можете просто передать значение 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! Это лучшая практика при изменении состояния. Вы можете погуглить почему!

  • вы должны определить компонент HitComponent вне метода рендеринга. его не нужно переопределять при каждом рендеринге компонента!

...