使用API​​调用，用户输入等构建React组件

Question

我在React中实现我想要的东西时遇到了麻烦。

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

我有一个我想要调用的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”（这是我遇到的主要问题）。 / p>

以下是我现在所拥有的一些示例代码：

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 prop设置为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>
        );
    }
});

所以，显然我需要将我将从Input组件获取的API数据传递给Result组件，可能是使用props。但似乎Result组件需要是Input组件的子组件，或者它们都需要在它们之间传递数据的父组件。不太重要的是，我还需要更新Result组件的状态，以便在API调用成功时可见。

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

Answer 1

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

应该有一个父组件将Input和Results作为子组件。父组件应包含数据提取功能，并将它们作为道具传递给子组件。 api调用返回的数据也应该作为props传递给需要数据的子节点。儿童组件应该“哑”，基本上显示数据。父组件应该处理其他所有事情。