Javascript 反应Natvie按钮和文本输入不工作

由于React Native中的

有点不确定，因此我使用了一个

，在this.state.display为true时呈现。但是文本输入和按钮在单击/与交互时不起任何作用

我尝试过使用常规的

，但更喜欢我的方式。以及改变模态的实际样式。我已经添加了不同的onpress和一些其他小的代码调整，但这些都不起作用

  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>;
    }
  }

shouldRender（）{
if（this.state.display）{
返回(
this.setState（{title}）}
值={this.state.title}
style={style.textInput}
/>
//其他按钮和文本输入也有类似的功能
);
}否则{
返回；
}
}

在渲染方法中：

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

返回(
+
)

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

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

---

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

您的描述听起来像是zIndex的问题-如果按钮不透明度和输入焦点不工作，则会在模式上方呈现一些内容

---

我会尝试将

{this.shouldRender（）}

移动到渲染方法中包含的

中的最后一个子级，如果这不起作用，那么向上移动

zIndex
可以在渲染（）中执行类似操作

render（）{
返回(
this.setState（{title}）}
值={this.state.title}
style={style.textInput}
/>
//其他按钮和文本输入也有类似的功能
+
)
}

仅当this.state.disaply==true时才会显示此模式
再详细一点就好了。你能展示你所涉及的全部组件吗？这里有一个完整组件的链接：这并没有解决问题。按钮和文本输入仍然不工作。你是对的，我没有仔细阅读-我的错误！你的描述听起来像是zIndex的一个问题-如果不透明度和对元素的聚焦都不正常的话，你的模型会被渲染出来。我会尝试将
{this.shouldRender（）}
移动到渲染方法中包含的
中的最后一个子级，如果这不起作用，则增加
zIndex
。但是似乎确实有什么东西在捕获tap事件，而不是您的自定义模式。我尝试了这两种方式，zIndex选项似乎没有改变任何东西，只是将
{this.shouldRender（）}
放在了末尾，它不会在点击时呈现，甚至当我将其设置为永久显示时也不会呈现。嘿@MaxTully我注意到你将我的答案标记为正确，但仍然存在的问题肯定不是解决方案-我的评论中是否有一部分有助于我将其包含在原始答案中？是的，当我将模态移到底部时，它似乎没有渲染的原因是因为它不在屏幕上，在将其重新调整到顶部后，一切都正常。我尝试过这一点，但即使当模态可见性被隐藏时，它也会显示出来。我更喜欢这种方式，因为它更具可定制性和可预测性。
render(){
  return(
  <Modal visible={this.state.display} 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
  </Modal>
  <TouchableOpacity
    onPress={this.setState({display: true})}
    style={styles.reminderTouch}>
    <Text style={styles.reminderBtn}>+</Text>
  </TouchableOpacity>
 )
}