问如何从TSX组件中的输入标记中获取一个值，并在另一个目录中的Node文件中使用该值？

EN

import React, { useState } from 'react'

function SearchButton() {
  const [ newsResponse, setNewsResponse ]= useState(null);

  function queryOnClick() {
    fetch(`http://localhost:4000/news-api`, {
      headers: { 'Content-Type': 'application/json' }
    })
      .then((response) => response.json())
      .then((result) => {
        console.log('result:', result);
        setNewsResponse(result);
      })
      .catch((ex) => {
        console.log('error:', ex);
      });
  }

  return (
    <div className="theme--white">
      <button className="search__button padding-1 margin-1 margin-left-6" onClick={queryOnClick}>
        Click to search
      </button>
    
      {newsResponse && newsResponse.articles ? (
        <div className="results__container padding-2 theme--mist">
          {newsResponse.articles.map((article: { 
            title: React.ReactNode;
            author: string;
            content: string;
            url: string;
          }) => (
            <div className="article__container box-shadow padding-2 margin-4 margin-left-6 margin-right-6 theme--white">
              <h2 className="article__title padding-bottom-2 margin-bottom-2">{article.title}</h2>
              <h3 className="article__author padding-bottom-2 margin-bottom-2">Written by: {article.author || 'An uncredited author'}</h3>
              <p className="article__content">
                {article.content.length > 150 ?
                  `${article.content.substring(0, 150)}... [Article shortened - Click the URL below to read more]` : article.content
                }
              </p>
              <div className="article__url margin-top-2">
                <p>
                  <p>Source:</p>
                  <a href={article.url}>{article.url}</a>
                </p>
              </div>
            </div>
          ))}
        </div>
      ) : null}
    </div>
  );
}

export default SearchButton;

import React, { Component } from 'react';

type SearchBarProps = {
  searchNews: (text: string) => void;
}

type SearchBarState = {
  searchString: string;
}

class SearchBar extends Component<SearchBarProps, SearchBarState> {
    static defaultProps = {
      searchNews: (text: string) => {}
    }

    state = {
      searchString: ''
    }

    searchNews = (e: any) => {
      const { searchString } = this.state

      if(e.key === 'Enter' && searchString !== '') {
      e.preventDefault();
      e.stopPropagation();
        this.props.searchNews(searchString)
        console.log(searchString)
      }
    }

    onSearchTextChange = (e: any) => {
      this.setState({
          searchString: e.target.value.trim()
      })
    }

    render() {
        return (
          <div>
              <form>
                  <div>
                      <input
                      id="search"
                      type="search"
                      value={this.state.searchString}
                      onChange={this.onSearchTextChange}
                      onKeyPress={e => this.searchNews(e)} placeholder="Search" />
                  </div>
              </form>
          </div>
        );
    }
}

export default SearchBar;

/*
 * Libs
 */
const express = require('express');
const fetch = require('node-fetch');
const cors = require('cors');
const app = express();

/*
 * Constants
 */
const PORT = 4000;
const API_KEY = 'x';
const SEARCH_QUERY = "Bitcoin";
const SORT_BY = "popularity";
const PAGE_SIZE = 10;

/*
 * Setup CORS - This is needed to bypass NewsAPI CORS Policy Blocking by rerouting request to localhost
 */
const corsOptions = {
  origin: 'http://localhost:3000',
  optionsSuccessStatus: 200
};

app.use(cors(corsOptions));

/*
 * Setup to request NewsAPI data using Fetch API
 */
app.get('/news-api', function (req, res) {
  fetch(`https://newsapi.org/v2/everything?q=${SEARCH_QUERY}&sortBy=${SORT_BY}&pageSize=${PAGE_SIZE}&apiKey=${API_KEY}`, {
    headers: { 'Content-Type': 'application/json' }
  })
    .then((response) => response.json())
    .then((result) => {
      console.log('result:', result);
      res.json(result);
    })
    .catch((ex) => {
      console.log('error:', ex);
      res.status(400).send({
        message: 'This is an error!',
        error: ex
     });
    });
})

/*
 * Start Backend API Proxy server
 */
app.listen(PORT, () => {
  console.log(`=================`)
  console.log(`API Connected!`)
  console.log(`Listening at http://localhost:${PORT}`)
  console.log(`=================`)
})