reactjs 如何在React.js中单击一次后禁用按钮

6l7fqoea 于 2022-11-29 发布在 React

关注(0)|答案(2)|浏览(167)

我想在单击一次后禁用按钮。我使用以下代码：

const handleClick = (event) => {
    event.currentTarget.disabled = true;
    console.log(event);
    console.log('button clicked');
  };

当我只有一个按钮时，它就能工作。

<div className="col-md-1">
          <button type="submit" onClick={handleClick} className="btn btn- 
                success">Filtriraj</button>
        </div>

但当我有多个相同的按钮时，它就不工作了。

<div className="showAds" >
        {adsList.map((val, key) => {
          return <div className="ad" key={key}>
            <h4> {val.content}</h4>
            <h5><a href=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#bb2d3b" className="bi bi-geo-alt-fill" viewBox="0 0 16 16">
              <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
            </svg>{val.adress}</a></h5>
            <h5>Likes: {val.likes}</h5>
            <div>
              {""}
              <button type="submit" onClick={() => {addLike(val.id, val.likes + 1);handleClick}} className="btn btn-success" > LIKE</button>
            </div>
          </div>
        })}
      </div>

问题是当我尝试调用handleClick时，它显示错误：

Expected an assignment or function call and instead saw an expression

reactjs

来源：https://stackoverflow.com/questions/74544038/how-to-disable-button-after-one-click-in-react-js

2条答案

按热度按时间

o2rvlv0m1#

在单击处理程序中，

() => {addLike(val.id, val.likes + 1);handleClick}

这会忽略事件参数，也会错误地呼叫handleClick。正确的版本应该是

(e) => {addLike(val.id, val.likes + 1);handleClick(e)}

这会取得事件（e）的参数，并将它传递给handleClick。

赞(0）回复(0）举报 2022-11-29

du7egjpx2#

export default function App() {
  let [adsList, setAdsList] = React.useState([
    { key: 0, id: 0, content: 'NewYork', adress: 'NewYork', likes: 0 },
    { key: 1, id: 1, content: 'Vancouver', adress: 'Vancouver', likes: 0 },
    { key: 2, id: 2, content: 'Toronto', adress: 'Toronto', likes: 0 },
  ]);

  const addLike = (id) => {
    let newAdsList = [...adsList];
    newAdsList[id].likes++;
    setAdsList(newAdsList);
  };

  return (
    <div className="showAds">
      {adsList.map((val, key) => {
        return (
          <div className="ad" key={key}>
            <h4> {val.content}</h4>
            <h5>
              <a href="">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="#bb2d3b"
                  className="bi bi-geo-alt-fill"
                  viewBox="0 0 16 16"
                >
                  <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
                </svg>
                {val.adress}
              </a>
            </h5>
            <h5>Likes: {val.likes}</h5>
            <div>
              {''}
              <button
                type="submit"
                onClick={() => {
                  addLike(val.id);
                  event.target.disabled = true;
                }}
                className="btn btn-success"
              >
                LIKE
              </button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

这应该行得通

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 如何在React.js中单击一次后禁用按钮

2条答案

相关问题

热门标签

最新问答