- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用模式创建一个编辑字段。我在 cardItem 中有一个字段列表,当我单击其中一个项目时,应该会弹出一个模式,其中包含要编辑的输入值。我正在使用 native 基础。
组件:
...
import {
Container, Header, Content, Card, Input,
CardItem, Text, Right, Icon, Row,
Left, Body, Title, Button, Label }
from 'native-base';
...
constructor(props) {
super(props);
this.state = {
tenantData: {},
visibleModal: false,
modalField: '',
modalLabel: '',
};
}
renderButton = (text, onPress) => (
<TouchableOpacity onPress={onPress}>
<View style={styles.modalButton}>
<Text>{text}</Text>
</View>
</TouchableOpacity>
);
renderModalContent() {
<View style={styles.modalContent}>
<Label>{this.state.modalLabel}</Label>
<Input defaultValue={this.state.modalField} />
{this.renderButton('Update', () => this.setState({
visibleModal: null,
modalField: '',
modalLabel: '',
}))}
</View>
}
...
render() {
const {
FirstName, LastName, Email, Phone, Unit, MiddleName
} = this.state.tenantData;
return (
<Container>
...
<Modal
isVisible={this.state.visibleModal === true}
animationIn={'slideInLeft'}
animationOut={'slideOutRight'}
>
{this.renderModalContent()}
</Modal>
...
<Card>
<TouchableOpacity
onPress={() => this.setState({
visibleModal: true,
modalField: 'FirstName',
modalLabel: { FirstName },
})}
>
<CardItem>
<Left>
<FontAwesome5 name="user-edit" />
<Text>First Name</Text>
</Left>
<Right>
<Row>
<Text style={styles.valueText}>{FirstName} </Text>
<Icon name="arrow-forward" />
</Row>
</Right>
</CardItem>
</TouchableOpacity>
... BELOW FEW MORE TouchableOpacity for other items ...
它对 React Native 有用吗?现在,模态打开并卡住屏幕(模态中没有显示)。另外,在模态输入中编辑数据后,如何更改 {FirstName} 的值?
最佳答案
你们的零食有很多问题。在 NativeBase 中,您需要包含一个 Text 标签来命名您的 Button。没有接受输入的输入标签。我从未使用过 react-native-modal,所以我从 react-native 切换到 Modal 组件。
下面您将看到我更改的代码的 3 个部分:
(1) 从 'react-native' 导入模态;
(2) renderModalContent()函数
(3)模态组件
...
import {
Container, Header, Content, Card, Input,
CardItem, Text, Right, Icon, Row,
Left, Body, Title, Button, Label, Form, Item }
from 'native-base';
...
import { Modal } from 'react-native'; // CHANGE_HERE
class TenantDetails extends Component {
constructor(props) {
super(props);
this.state = {
tenantData: {
FirstName: 'Jonh', LastName: 'Doe', Email: 'jonh@test.com', Phone: 'xxx-xxx-xxxx',
Unit: '101', MiddleName: '',
},
visibleModal: false,
modalField: '',
modalLabel: '',
};
}
renderModalContent() { //CHANGE_HERE
return (
<View style={{ flex: 1 }}>
<Form>
<Text>Hello!</Text>
<Item fixedLabel>
<Label>First Name</Label>
<Input
value={this.state.tenantData.FirstName}
onChangeText={(text) => {
const myTenantData = {...this.state.tenantData, FirstName: text};
this.setState({tenantData: myTenantData})}}
/>
</Item>
<Button
onPress={() => this.setState({
visibleModal: false
})}
>
<Text>Hide Modal</Text>
</Button>
</Form>
</View>
)
}
render() {
const {
FirstName, LastName, Email, Phone, Unit, MiddleName
} = this.state.tenantData;
return (
<Container>
<Header>
<Left>
<Button
transparent
>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>{FirstName} {LastName}</Title>
</Body>
<Right />
</Header>
<Content>
... // CHANGE_HERE
<Modal
transparent={false}
visible={this.state.visibleModal}
animationType="slide"
>
{this.renderModalContent()}
</Modal>
<Card>
<View style={styles.containerTextHeader}>
<Text style={styles.infoTextHeader}>Tenant Details</Text>
</View>
<TouchableOpacity
onPress={() => this.setState({
visibleModal: true,
modalField: 'FirstName',
modalLabel: { FirstName },
})}
>
<CardItem>
<Left>
<FontAwesome5 name="user-edit" />
<Text>First Name</Text>
</Left>
<Right>
<Row>
<Text style={styles.valueText}>{FirstName} </Text>
<Icon name="arrow-forward" />
</Row>
</Right>
</CardItem>
</TouchableOpacity>
<TouchableOpacity onPress={() => Alert.alert('OK')} >
<CardItem>
<Left>
<FontAwesome5 name="user-edit" />
<Text>Middle Name</Text>
</Left>
<Right>
<Row>
<Text style={styles.valueText}>{MiddleName} </Text>
<Icon name="arrow-forward" />
</Row>
</Right>
</CardItem>
</TouchableOpacity>
<TouchableOpacity onPress={() => Alert.alert('OK')} >
<CardItem>
<Left>
<FontAwesome5 name="user-edit" />
<Text>Last Name</Text>
</Left>
<Right>
<Row>
<Text style={styles.valueText}>{LastName} </Text>
<Icon name="arrow-forward" />
</Row>
</Right>
</CardItem>
</TouchableOpacity>
<TouchableOpacity onPress={() => Alert.alert('OK')} >
<CardItem>
<Left>
<FontAwesome name="paper-plane" />
<Text>Email</Text>
</Left>
<Right>
<Row>
<Text style={styles.valueText}>{Email} </Text>
<Icon name="arrow-forward" />
</Row>
</Right>
</CardItem>
</TouchableOpacity>
<TouchableOpacity onPress={() => Alert.alert('OK')} >
<CardItem>
<Left>
<FontAwesome name="phone" />
<Text>Phone</Text>
</Left>
<Right>
<Row>
<Text style={styles.valueText}>{Phone} </Text>
<Icon name="arrow-forward" />
</Row>
</Right>
</CardItem>
</TouchableOpacity>
</Card>
</Content>
</Container>
);
}
}
...
关于react-native - 使用输入选项 React Native 打开 Modal 并更新 cardItem 文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56909638/
我有 Angular 问题 modal service 我的 app.js 包括: angular.module('myApp', ['myApp.test', 'ui.bootstrap','sma
这是模态中模态的示例。 http://foundation.zurb.com/docs/components/reveal.html 关闭子模态后,有什么方法可以返回到相同状态的第一个模态吗?或者,更
我在另一个模态中有一个模态,我设法使内部模态关闭而不影响另一个模态。问题是,当第二个模态关闭时,它会为其自身和第一个模态触发 'hidden.bs.modal' 事件。 Open demo moda
我试图在单击跨度时打开 Bootstrap 模式对话框,我在互联网上搜索了问题的解决方案 Bootstrap 模式 $(...).modal 不是函数 但我发现的唯一解决方案是“将 jQuery 脚本
我收到错误:this.$modal.modal 不是一个函数 我通过 gulp 文件从 wwwroot 文件夹中的 Node_Module 获得了 ng2-bs3-modal。 我的文件夹结构是:
我使用“use-ajax”类在模态中呈现登录表单。我想在不关闭同一模式的情况下处理验证错误。成功登录后,它会正确重定向,但是当发生错误时,它会关闭模式并重定向到登录页面,即用户/登录并在该页面上显示错
我使用的是 5.2.9 版的 Angular 5,我使用的是 ngx-smart-modal,当我打开 Modal 时,它不显示内容并且非常接近顶部并缩小,附加的图像已附加。 const reason
我正在尝试显示模式弹出窗口以显示网格中所选记录的详细信息。在模式弹出窗口中设置每个控件的值后,我尝试打开它但失败。我已在网站母版页中包含了所有必需的引用,但不断收到“对象不支持属性或方法‘模态’”错误
我正在关注这个Tutorial . 这是我的代码(我已经排除了我的表格 HTML): @model IEnumerable @{ Layout = "~/Views/Shared/_Layou
使用 twitter bootstrap 框架进行 Web 应用程序。我正在使用一个模态,其中我调用另一个模态,其中一个模态位于另一个模态之上。目前,如果您单击关闭“x”按钮,它将关闭两个模式窗口。我
是否可以使用 Twitter Bootstrap 在另一个模态中打开一个模态? 我创建了一个模态,并在第一个模态体内放置了一个指向第二个模态的链接和第二个模态的定义。当我单击链接时,第二个模式在第一个
我正在尝试将 Angular 的 Bootstrap 模式传递给在 Angular Masonry Gallery 中单击的图像的 URL。我所拥有的与文档中的演示非常接近,仅做了一些更改。我知道这完
我需要解决这个问题,我的问题是您看到的第一个模态框必须在白色模态框的后面,我该如何更改它们的位置? 这是图片 黑色模态应该在后面,白色模态应该在前面我怎样才能做到这一点?请帮忙谢谢。 这是我专门制作的
我在 Bootstrap 中遇到这些模态问题。我已经为两者设置了不同的 id,但是当按下“更多”按钮时只有第一个出现。第二个按钮没有显示所需的模式。 Something The Team
被这个问题难住了,但也许,只是也许,有人以前遇到过这个问题,可以给我指出正确的方向。 我有一个 JDialog 用于显示长时间运行的任务的进度,我已将其明确创建为具有定义的所有者的模式: prog
我有一个使用 PrimeFaces 3.0.1 在模态对话框上显示的模态 ConfirmDialog。如果 ConfirmDialog 被打开,整个页面都会被锁定,包括 ConfirmDialog 本
因此,我使用这段代码在当前打开的模态窗口中打开另一个模态窗口: Click 发生的情况是,滚动条会重复 500 毫秒。我猜是因为当前模式仍在淡出。然而,它看起来非常不平滑和卡顿。 如果有任何解决此问题
我目前在 Angular 应用程序中使用自定义主题,我需要将一个额外的 css 类附加到“.modal-dialog”容器,它位于 ngb-modal 内部-窗口。 根据文档 (https://ng-
我关注了这个 StackBlitz example加你 ngx-smart-modal window 。 一切都很顺利,除了组件在页面上打开而不是在灯箱模式弹出窗口中打开。 此示例使用 Angular
我想用 bunit 测试模态是否打开。问题是,模态没有被渲染。如何用 bunit 打开一个 blazored modal? 在我的测试组件中创建模态: Hi
我是一名优秀的程序员,十分优秀!