Question

我在react组件内部有一个按钮，单击按钮时按钮上的测试显示-- NOT EXISTS -- SELECT p.*, f.* FROM people AS p LEFT JOIN people_fruits AS pf ON pf.people_id = p.id LEFT JOIN fruits AS f ON pf.fruits_id = f.id -- added this where condition with not exists WHERE NOT EXISTS (SELECT 1 FROM people_fruits PFIN JOIN fruits FIN ON PFIN.fruits_id = FIN.id AND FIN.NAME = 'orange' and PFIN.people_id = p.id); -- NOT IN -- SELECT p.*, f.* FROM people AS p LEFT JOIN people_fruits AS pf ON pf.people_id = p.id LEFT JOIN fruits AS f ON pf.fruits_id = f.id -- added this where condition with not IN WHERE p.id not in (SELECT PFIN.people_id FROM people_fruits PFIN JOIN fruits FIN ON PFIN.fruits_id = FIN.id AND FIN.NAME = 'orange');，我调用函数Join Now，然后将状态设置为true。我希望显示正在加载的svg图像，但该图像的路径显示在按钮上。

submitForm

Answer 1

尝试以这种方式显示图像-您需要一个img标记才能显示图像内容，React不会开箱即用。

return (
  <button className="btn-join" onClick={submitForm}>
    {!state.loading && 'Join Now!'} 
    {state.loading && <img src={loading} /> }
  </button>       
);

Answer 2

import React, { useState } from 'react';
import Context from './context';
import loading from '../images/loading.svg';

const ButtonSpinner: React.FC = () => {

const [state, setState] = useState({loading: false});
function submitForm() {
    setState({ ...state, loading: true})
}

return (
 <button className="btn-join" onClick={submitForm}>
   {!state.loading ? 'Join Now!' : <img src={loading} alt="loading" />} 
 </button>       
);
}

export {ButtonSpinner};

使用加载微调器来响应TypeScript按钮

2 个答案: