时间戳

首页 > 解决方案 > React Natvie 按钮和 textInput 不起作用

javascript - React Natvie 按钮和 textInput 不起作用

问题描述

由于<Modal>React Native 中的 有点不确定，我自己制作了一个<View>在 this.state.display 为 true 时呈现的。但是文本输入和按钮在单击/交互时不会做任何事情。

我尝试过使用常规<Modal>但更喜欢我的方式。以及更改模态的实际样式。我添加了不同的 onPresses 和其他一些无效的小代码调整。

  shouldRender() {
    if (this.state.display) {
      return (
        <View style={styles.modal}>
          <TextInput
            placeholder="Event Title"
            onChangeText={title => this.setState({title})}
            value={this.state.title}
            style={styles.textInput}
           />
          <TextInput />
          <Button />
          <Button /> //the other buttons and textinput has similar things
        </View>
      );
    } else {
      return <View></View>;
    }
  }

在渲染方法中：

return(
<TouchableOpacity
  onPress={this.addReminder}
  style={styles.reminderTouch}>
  <Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
)

而 addReminder 方法只是将 this.state.display 设置为 true

我正在寻找提交/关闭模式和文本输入以更改标题和文本状态的按钮。现在，按钮在按下时没有动画，并且无法单击文本输入。

此外，在模态之前，当文本输入仅在屏幕上时，一切正常。

标签： javascriptreact-nativemodal-dialog

解决方案

您的描述听起来像是 zIndex 的问题 - 如果按钮不透明度和输入焦点不起作用，则会在您的模式顶部呈现一些东西。

我会尝试<View>{this.shouldRender()}</View>在<View>您的渲染方法中将zIndex.

推荐阅读