Question

我分配了一个使用coinmarketcap的API制作cryptocurrenty转换器的任务。我设法检索数据并显示所有内容，但问题是所有字段的行为都像一个字段一样。

您可以在这里看到它： https://repl.it/repls/IncompatibleWhirlwindHarddrive

function App() {
  const [data, setData] = useState("");
  const [coinValue, setCoinValue] = useState("")
  const [value, setValue] = useState("")

  useEffect(() => {
  let url = "https://cors-anywhere.herokuapp.com/https://sandbox-api.coinmarketcap.com/v1/cryptocurrency/listings/latest"

    axios
      .get(url,{
        headers: {
          'X-CMC_PRO_API_KEY': 'c8643baa-31bf-4d31-8868-af73ce84766b'
        },
      })
      .then(result => setData(result.data.data));
  }, []);

  return (
    <>
      <table className="table ">
        <thead>
          <tr>
            <th>Name</th>
            <th>Short Name</th>
            <th>$ Value</th>
            <th>Last 24h</th>
            <th>Amount you own</th>
            <th>$ value of your coins</th>
          </tr>
        </thead>
        <tbody>

          {Array.isArray(data) &&
            data.map(objects => {
              let price = objects.quote.USD.price.toFixed(2)
              let Result = (function() {
                return price * coinValue
            });
              return (
                <tr key={objects.name}>
                  <td>{objects.name}</td>
                  <td>
                    {objects.symbol}
                  </td>
                  <td onLoad={()=>setValue(price)}>
                    {price}
                  </td>
                  <td style={{color: objects.quote.USD.percent_change_24h > 0 ? "green" : "red"}}>{objects.quote.USD.percent_change_24h.toFixed(2)}</td>
                  <td>
                    <input required type="number" onChange={e => setCoinValue(e.target.value)} /> <br/>
                    <button className="btn" disabled={!coinValue} type="submit" onClick={Result}>Submit</button>
                  </td>
                  <td>
                    <Result></Result>
                  </td>
                </tr>
              );
            })}
        </tbody>
      </table>
      </>
  );
}

export default App;

我需要禁用每个按钮，直到输入字段中有某个值，但该按钮附带的输入字段中才有值。另外，当您按“提交”时，我必须仅显示输入具有值的字段的转换。

谢谢。

如何使用.map使用多个输入字段-ReactJS

0 个答案: