javascript - 使用 API 调用、用户输入等构建 React 组件

Question

我无法在 React 中实现我想要的东西。

我找到了一些示例并完成了 Codecademy React 教程的第 1 部分。所以，我在某种程度上理解 props 和 state，但我发现很难将其应用于我的特定用例。

我有一个 Python Flask API，我想调用它。我将像这样使用基本的 XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        callback(xhr.responseText)
        }

param1 = encodeURIComponent(document.getElementById("param1").value);
param2 = encodeURIComponent(document.getElementById("param2").value);
xhr.open("GET", "/apicall?param1="+param1+"&param2="+param2", true);
xhr.send(null);

我的 Flask API 可以处理这个问题并根据参数执行一些计算并返回一个包含结果的 JSON 对象，即:

{
 result1: 100,
 result2: 150
}

我现在的基本页面结构是一个输入部分和一个结果部分。输入部分底部有两个按钮。按钮 1 用于计算和显示结果(如果输入数据有效并且 API 调用返回有效结果，应该进行 API 调用并使结果部分可见)。按钮 2 是清除(应该清除和隐藏结果部分，并从输入部分的框中清除输入值)。

结果部分底部还有一个按钮，用于显示需要另一个 API 调用的额外结果(使用来自输入部分和结果部分的参数)。

这个项目开始时使用 jQuery 操作的 html 模板，所以到目前为止，我的 React 组件还没有做任何“React-y”(这是我遇到的主要问题)。

这是我现在拥有的一些示例代码:

var Input = React.createClass({

    render () {

        return (
            <div className="input-container">
              <h2>Inputs</h2>
              <h4>Input 1</h4>
              <input className="input-box" name="param1" id="param1"/>
              <input className="input-box" name="param2" id="param2"/>
              <button className="input-btn" id="calculate">Calculate</button>
              <button className="input-btn" id="clear">Clear</button>
            </div>
            );
        }
    });

我在想的是我需要将按钮的 onClick 属性设置为 API 调用函数，我想这应该是 Input 类中的一个方法？

我的结果部分是这样的:

var Results = React.createClass({

    render () {

    return (
        <div className="results-container" style={display: 'none'}>
          <h2>Results</h2>
          <p>Result 1 is <strong><span id="result1"></span></strong></p>
          <p>Result 2 is <strong><span id="result2"></span></strong></p>
          <button class="btn" id="show-result-plots">Show Results Plots</button>
          <div className="plots-container">
            <div id="plot1"></div>
            <div id="plot2"></div>
          </div>
        </div>
        );
    }
});

所以，显然我需要将从输入组件获取的 API 数据传递到结果组件，大概使用 props。但看起来 Result 组件需要成为 Input 组件的子组件，或者它们都需要一个在它们之间传递数据的父组件。次要的是，我还需要更新 Result 组件的状态，使其在 API 调用成功时可见。

我已经掌握了大部分内容，但我正在努力以正确的方式将它们组合在一起。

Answer 1

我会考虑使用 Redux为您的数据处理。这将简化您应用程序中所有内容的流程。如果您不想使用它来处理状态和操作，那么我相信您走在正确的道路上。

应该有一个将 Input 和 Results 作为子组件的父组件。父组件应该包含数据获取函数并将它们作为 props 传递给子组件。 api 调用返回的数据也应该作为 Prop 传递给需要数据的 child 。子组件应该是“哑”的，本质上是显示数据。父组件应该处理其他一切。