在React中单击另一个输入框时如何更改输入值

您可以在这里试用我的更改。

import React, { Component } from "react";

export default class Api extends Component {
  state = {
    countries: [],
    countryName: "",
    countryCode: ""
  };

  handleCountryPick = (event) => {
    event.preventDefault();
    const country = this.state.countries.find(
      (country) => country.name === event.target.value
    );
    this.setState({
      countryCode: country.callingCodes,
      countryName: country.name
    });
  };

  async componentDidMount() {
    const response = await fetch("https://restcountries.eu/rest/v2/all");
    const countries = await response.json();
    this.setState({ countries: countries });
  }

  render() {
    return (
      <div>
        <h1 className="text-center">Api</h1>
        <h2>country details</h2>
        <CountrySelector
          countries={this.state.countries}
          countryName={this.state.countryName}
          onCountryPickHandler={this.handleCountryPick}
        />
        <CountryCodeInput countryCode={this.state.countryCode} />
      </div>
    );
  }
}

const CountrySelector = ({ countryName, countries, onCountryPickHandler }) => {
  const options = countries.map((country) => (
    <option key={country.name} value={country.name}>
      {country.name}
    </option>
  ));
  return (
    <div>
      <select value={countryName || "none"} onChange={onCountryPickHandler}>
        {options}
        <option value="none">None</option>
      </select>
    </div>
  );
};

const CountryCodeInput = ({ countryCode }) => {
  return (
    <div>
      <label>Country Code: </label>
      <input type="text" value={countryCode} />
    </div>
  );
};

这是您需要学习才能从头开始实现的内容：

1. 数据绑定是单向的，从父母到孩子，这就是为什么你需要保持你的处理程序（回调），handleCountryPick在保持状态的父countries，countryName，countryCode。
2. 更新发生的时间以及哪些组件知道什么时间。