Question

即使我指定了特定值，下面的代码也将返回null。我认为问题在于document.getelementbyid('userInput')显然返回null，但我认为情况并非100％。谢谢

import React  from 'react'
import { withRouteData, Link } from 'react-static'
//
export default withRouteData(({ currencies }) => (
<div> 

  <Link to="/">Quoinex</Link>
  <Link to="/qryptos"><b>Qryptos</b></Link>
  <form id="form">
    <input type="text" name="name" placeholder="BTC etc." id="userInput" value="BTC" />
    <input className="sub" type="submit" />
  </form>
  <h1>Tokens</h1>
  <br />
  <table className="myTable">
    <tr>
      <th>Crypto/Token</th>
      <th>Min Withdrawal Qty</th>
      <th>Min Order Qty</th>
    </tr>
    { currencies.filter(currency => currency.currency === document.getElementById('userInput').value).map(currency => (
      <tr key={currency.currency}>
        <td id="tokenName">{currency.currency}</td>
        <td>{currency.minimum_withdrawal}</td>
        <td>{currency.minimum_order_quantity}</td> 
      </tr>
    ))}
  </table>

</div>
))

Answer 1

您可以尝试使用ref代替document.getElementById并获取值。

export default withRouteData(({ currencies }) => (
<div> 

  <Link to="/">Quoinex</Link>
  <Link to="/qryptos"><b>Qryptos</b></Link>
  <form id="form">
    <input type="text" name="name" placeholder="BTC etc." id="userInput" ref="userInput" value="BTC" />
    <input className="sub" type="submit" />
  </form>
  <h1>Tokens</h1>
  <br />
  <table className="myTable">
    <tr>
      <th>Crypto/Token</th>
      <th>Min Withdrawal Qty</th>
      <th>Min Order Qty</th>
    </tr>
    { currencies.filter(currency => currency.currency === React.findDOMNode(this.refs.userInput).value).map(currency => (
      <tr key={currency.currency}>
        <td id="tokenName">{currency.currency}</td>
        <td>{currency.minimum_withdrawal}</td>
        <td>{currency.minimum_order_quantity}</td> 
      </tr>
    ))}
  </table>

</div>
))

为什么即使我指定了值也返回null？

1 个答案: