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

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')
);