时间戳

首页 > 解决方案 > 反应原生的布尔文本输入

reactjs - 反应原生的布尔文本输入

问题描述

我们如何在本机反应中使用 Boolean TextInput？我尝试使用单选按钮或选中按钮，但是当用户单击表单上的提交按钮时，我无法将选定的数据发送到服务器端。如果我使用选中的按钮，我怎么知道该按钮已被用户选中？我是新手反应原生，这将是一个很大的帮助。我正在阅读 react-native 的文档，但使用布尔文本输入我很难理解。谢谢你。

我正在使用 Picker 很高兴知道是否有更好的选择

<Picker
  selectedValue={status}
  style={{ height: 50, width: 150 }}
  onValueChange={(itemValue) => setStatus(itemValue)}>
  <Picker.Item label="True" value="True" />
  <Picker.Item label="False" value="False" />
</Picker>;

标签： reactjsreact-nativeexpo

解决方案

使用选取器

labelfor是向用户显示的Picker.Item文本，因此始终需要是string. 但是对于value道具，我们可以传递boolean值true而false不是 a string。而已！

<Picker
  selectedValue={status}
  style={{ height: 50, width: 150 }}
  onValueChange={setStatus}>
  <Picker.Item label="True" value={true} />
  <Picker.Item label="False" value={false} />
</Picker>

其他选项

下拉菜单不是选择true/false值的最直观方式。我会说 aSwitch是最好的（尽管由于某种原因，这在 expo Web 上无法正确呈现）。

<Switch
  value={status}
  onValueChange={setStatus}
/>

不同的组件有不同的 props，因此请检查文档以查看值是否为 a boolean，string等。对于单个RadioButton，您使用status={ status ? 'checked' : 'unchecked' }它是因为它由字符串'checked'和控制'unchecked'。

这是一个演示，显示了四个不同的选项。

推荐阅读