时间戳

首页 > 解决方案 > 反应选择选项值改变变量数据

javascript - 反应选择选项值改变变量数据

问题描述

我正在努力成为一名前端开发人员，所以我正在创建一个包含公司信息的项目。我试图在 YouTube 和这里​​找到，但我仍然无法理解。

我想使用 on Change 来显示结果，但是如何将选项值传递给变量？

import React, { Component } from "react";

class BusinessCard extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      company: null,
    };
  }

  async componentDidMount() {
    let companyCod = "MSFT"; // I want receive the option value here
    let companyUrl =
      "https://www.alphavantage.co/query?function=OVERVIEW&symbol=" +
      companyCod +
      "&apikey=YOUR-API-KEY";
    let response = await fetch(companyUrl);
    let data = await response.json();
    this.setState({ company: data, loading: false });
  }

  render() {
    if (this.state.loading) {
      return <div>loading</div>;
    }

    return (
      <div>
        <select>
          <option value="MSFT">MSFT</option>
          <option value="AAPL">AAPL</option>
          <option value="IBM">IBM</option>
        </select>

        <h1>Company: {this.state.company.Name}</h1>
        <h1>Symbol: {this.state.company.Symbol}</h1>
      </div>
    );
  }
}

标签： javascriptreactjs

解决方案

您可以将 置于countryCode您的组件状态，并将componentDidMount代码移动到一个单独的函数中，您可以在该函数中调用componentDidMount以及在选择更改时调用该函数。

例子

import React, { Component } from "react";

export default class BusinessCard extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      company: null,
      companyCode: "MSFT"
    };
  }

  loadCompany = async (companyCode) => {
    let companyUrl =
      "https://www.alphavantage.co/query?function=OVERVIEW&symbol=" +
      companyCode +
      "&apikey=YOUR-API-KEY";
    let response = await fetch(companyUrl);
    let data = await response.json();
    this.setState({ company: data, loading: false });
  }

  componentDidMount() {
    this.loadCompany(this.state.companyCode);
  }

  handleChange = (e) => {
    const companyCode = e.target.value;
    this.setState({ companyCode });

    this.loadCompany(companyCode);
  };

  render() {
    if (this.state.loading) {
      return <div>loading</div>;
    }

    return (
      <div>
        <select
          value={this.state.companyCode}
          onChange={this.handleChange}
        >
          <option value="MSFT">MSFT</option>
          <option value="AAPL">AAPL</option>
          <option value="IBM">IBM</option>
        </select>

        <h1>Company: {this.state.company.Name}</h1>
        <h1>Symbol: {this.state.company.Symbol}</h1>
      </div>
    );
  }
}

推荐阅读