0

您好，我是新来的，对更改类和动画 onClick 有疑问。

我试图仅使用我添加或删除到我的类名中的数组的 css 类来上下移动。

app.js 我有这个状态

updown: ["containerMG"],

这是我在 app.js 中渲染组件的方式

  render() {

    return (
      <div>
      <div className="movies-container">
        {this.state.filmovi.map((film, index) => {
          return <Film
                    naslov={film.naslov}
                    naslovnaSlika={film.naslovnaSlika}
                    key={film.id}
                    openFilm={() => this.injectFilm(index)}/>
      })}
      </div>
      <Gallery />
      <ContainerMG
        selectedFilm={this.state.selectedFilm}
        klasa={this.state.updown}
        zatvori={this.closePreview}/>
      </div>
    );
  }

我的组件看起来像这样

const ContainerMG = (props) => {
  return (
      <div className={props.klasa.join(' ')}>
      <img onClick={props.zatvori} src="xxx" alt="close" className="close-popup" />
        <p>{props.selectedFilm.naslovFilma}</p>
      </div>
  )
}

这就是 div 向上移动的方式

  injectFilm = (filmIndex) => {
    this.state.updown.push("position-top");
    const selectedFilm = this.state.filmovi.find((film, index) => index === filmIndex)
    this.setState((prevState) => ({
       selectedFilm
    }))
  }

这就是我试图将其向下移动的方式

  closePreview = () => {
    this.state.updown.splice(1);
  }

我很确定我不应该直接更改状态，而且当我更改它以删除“位置顶部”类时，dom 不会重新加载。

感谢您提前提供的所有帮助，如果我没有展示您需要的东西，请写信。

4

1 回答 1

1

You're right, you should never change the state directly like that, but rather, use a setState() method. Doing this.state.updown.push("position-top"); will mutate it. Let's say you want to remove whatever is last from the array, you could do something like:

const {updown} = this.state;
updown.pop();
this.setState({updown: updown});

Which would cause a re-render. Treat the state as if it were immutable.

于 2019-01-27T21:21:35.923 回答