Question

我正在尝试为搜索输入的值设置状态，以测试状态是否通过。我的最终目标是建立一个搜索过滤器，以使用货币名称对整个加密货币数据进行过滤。但是，为了做到这一点，我必须首先确保我知道谁将状态传递给搜索输入的值。

我将如何添加该构造函数

constructor() {
    super();
    this: {
      [x: string]: 'test',
      any:any,
      search: string
    },
  }

此文件：

import React  from 'react'
import { withRouteData, Link } from 'react-static'

//


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

    <Link to="/markets/quoinex">Quoinex</Link>
        <Link to="/markets/qryptos"><b>Qryptos</b></Link>
        <form>
          <input type="text" name="name" placeholder="BTC etc."/>
          <input className="sub" type="submit" value={this.state.search} />
        </form>

    <h1>Tokens</h1>
    <br />
    <table>
        <tr>
            <th>Crypto/Token</th>
            <th>Min Withdrawal Qty</th>
            <th>Min Order Qty</th>
        </tr>

        {currencies.slice(0,52).map(currency => (
             <tr key={currency.currency}>
             <td>{currency.currency}</td>
             <td>{currency.minimum_withdrawal}</td>
             <td>{currency.minimum_order_quantity}</td> 
         </tr>
      ))}
    </table>
    <table className="table2">
        <tr>
            <th>Crypto/Token</th>
            <th>Min Withdrawal Qty</th>
            <th>Min Order Qty</th>
        </tr>

        {currencies.slice(52,).map(currency => (
             <tr key={currency.currency}>
             <td>{currency.currency}</td>
             <td>{currency.minimum_withdrawal}</td>
             <td>{currency.minimum_order_quantity}</td> 
         </tr>
      ))}
    </table>


  </div>
))

Answer 1

我认为这是最好的例子。功能组件不能具有状态：https://jsfiddle.net/69z2wepo/259554/

class Hello extends React.Component {
    constructor() {
    super();
    this.state = {
        test: 'this is a test'
    }
  }

  render() {
    return <div>Hello {this.props.name}, {this.state.test}</div>
  }
}

const FunctionalHello = ({name}) => (
    <div>Hello {name}</div>
);

ReactDOM.render(
    <div>
      <Hello name="World" />
    <FunctionalHello name="World" />
    </div>,

  document.getElementById('container')
);

如何将状态构造函数添加到此js文件？

1 个答案: