reactjs - 如何在 React 中显示来自全局状态的数据？

Question

各位程序员好，

我需要页面上显示的全局状态的数据。要指定：用户必须查看他在表单中输入的数据并确保其正确。主要目标是首先将其放在页面上。

什么是全局状态？它是来自输入字段的数据被收集并且能够被编辑的地方。这是我如何获取数据的示例：

const [enteredFirstName, setEnteredFirstName] = useState('');

在表格中，它看起来像这样：

<Card>
   <div className="formControl">
       <label htmlFor="first_name">Voornaam</label>
       <input
            type="text"
            id="first_name"
            value={enteredFirstName}
            onChange={event => {
                setEnteredFirstName(event.target.value)
            }}
       />
    </div>
</Card>

卡确保将收集表单数据。

const Card = props => {
    return <div className="card">{props.children}</div>
};

现在我需要显示数据。我假设我必须获得孩子们的道具并以这种方式“获取”数据？我已经尝试过教程，但找不到与我的问题相关的任何内容。

这张图片说明了它的外观：

标签： reactjs

Answer 1

我使用了您的一些代码并创建了一个沙箱，希望能够复制您需要的功能。

请检查并让我知道这是否有帮助：https ://codesandbox.io/s/wizardly-visvesvaraya-025cf?file=/src/Form.js

编辑：要回答您的问题，您可以使用原始状态并将其传递给仅根据您设置的条件呈现的另一个组件。- 在我的示例中，我将状态传递给 UserData 组件，该组件仅在提交数据时呈现。