單擊時更改圖像 - React

Question

例如，這是我的觀點：

<div>
  <img src='../../minus.png' />
</div>

現在我想在每次單擊時將圖像從plus.png更改為minus.png 。

因此，單擊一次： minus.png => plus.png ，再次單擊： plus.png => minus.png ，依此類推。 我怎樣才能做到這一點？

Answer 1

這可以通過一個簡單的切換處理程序來實現：

 const imagesPath = { minus: "https://images.vexels.com/media/users/3/131484/isolated/preview/a432fa4062ed3d68771db7c1d65ee885-minus-inside-circle-icon-by-vexels.png", plus: "https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png" } class App extends React.Component { state = { open: true } toggleImage = () => { this.setState(state => ({ open: !state.open })) } getImageName = () => this.state.open ? 'plus' : 'minus' render() { const imageName = this.getImageName(); return ( <div> <img style={{maxWidth: '50px'}} src={imagesPath[imageName]} onClick={this.toggleImage} /> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>

編輯
請注意，我為setState傳遞了一個函數參數，因為我的新狀態依賴於舊狀態。 您可以在文檔中閱讀更多相關信息

Answer 2

在按鈕單擊時嘗試使用此示例代碼更改條件以呈現 img src：

    import React from "react";
import "./styles.css";
import { Card, CardImg, CardBody, Button } from "reactstrap";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      loginState: true
    };
  }

  render() {
    let sessonState;
    let imgurl;
    if (this.state.loginState) {
      sessonState = "Logged In";
      imgurl = "https://picsum.photos/id/237/200/300";
    } else {
      imgurl = "https://picsum.photos/seed/picsum/200/300";
      sessonState = "Logged Out";
    }

    return (
      <div>
        <h1>Session {sessonState}!!</h1>
        <br />
        <div className="container">
          <div className="row">
            <div className="col-md-4">
              <Card className="shadow">
                <CardImg top width="100%" src={imgurl} alt="Card image cap" />
                <CardBody>
                  <Button
                    className="shadow-sm btn "
                    onClick={() => {
                      this.setState({
                        loginState: false
                      });
                      console.log(`${imgurl}`);
                    }}
                  >
                    Button
                  </Button>
                </CardBody>
              </Card>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Answer 3

假設這是在渲染函數中：

<div>
  <img onClick={() => {this.setState({clicked: true})} 
       src={'../../' + (this.state.clicked ? 'plus' : 'minus') + '.png'}} />
</div>