首页 文章

在React中按下按钮重新渲染道具数据

提问于
浏览 次
1

UPDATE #2 ：我在JSFiddle上发布了LinksScreen和TimelineDay的代码 . 对不起，我之前没有这样做过！

UPDATE ：我使用的建议重新构建了我的代码 . 我现在正在尝试更新组件 TimelineDay 中的道具 timelineData 并重新渲染 LinksScreen 类 . 但是，我的测试没有任何反应 . 我对州/道具很新，所以任何建议都会非常感激 .

对React / JS（新手警报）来说很新 . 让我们进入问题的重要部分..

类 LinksScreen 包含带有props和外部组件的Flexbox视图

import TimelineDay from '../components/TimelineDay.js';

export default class LinksScreen extends React.Component {
constructor() {
    super();

    this.onPress1 = this.onPress1.bind(this);
    this.onPress2 = this.onPress2.bind(this);
    this.onPress3 = this.onPress3.bind(this);

    this.state = {
        dayOne: [ . . ],
        dayTwo: [. . ],
        dayThree: [. . ],
    }
}

Headers 中的按钮具有自定义 onPressX 函数，以使用相应的 dayOne ， dayTwo 或 dayThree 数据更新 timelineData prop .

render() {
    return (
        <View style={styles.container}>
        <View style={styles.dayBar}>
            <TouchableHighlight onPress={this.onPress1}>
                <View>
                    <MaterialCommunityIcons name="numeric-1-box-outline" size={34} color="#FFD344"/>
                     <Text style={styles.day1Text}>Fri, 29th</Text>
                </View>
            </TouchableHighlight>
           </View>

这些是相应的按钮功能，可以使用适当的数组重新分配子prop timelineData

onPress1 = () => {
    this.setState({timelineData: this.state.dayOne})
};
onPress2 = () => {
    this.setState({timelineData: this.state.dayTwo})
};
onPress3 = () => {
    this.setState({timelineData: this.state.dayThree})
};

我猜测，通过调用setState（），还会调用重新渲染 . 但是，这是我在测试中观察困难的原因 .

这是包含 TimelineDay 组件和 timelineData prop的方法，我希望在按钮单击和支持重新分配时重新呈现 .

<View style={styles.eventScheduleView}>
     <TimelineDay ref={(timelineData) => {
         timelineData = this.state.timelineData}}>
     </TimelineDay>
</View>

这可能是一个非常有用的问题，但我（以及我大学的黑客马拉松领导团队）需要额外的澄清 .

随意丢弃任何有用的资源（Flux，州等） . 谢谢！

javascript reactjs react-native redux flux

2 回答

  • 0

    这里有一些你正在做的事情有点奇怪 . 我猜想你的whataday2按钮有效 .

    <TouchableHighlight onPress={{whatDay: "dayOne"}}>

    和

    <TouchableHighlight onPress={{whatDay: "dayThree"}}>

    没有做任何事情，除了使用属性'whatDay'将对象放入onPress . 但是，此按钮会传递您创建的实际功能，这是正确的方法 .

    <TouchableHighlight onPress={this.onPress}>

    此外，您无需在onPress函数中返回setState，这些触摸中的每一个都只是执行onPress按钮调用的内容 . 如果你 . 有两种方法可以正确地执行此操作，第一种方法是为每个'whatday'调用创建单个onPress调用，就像这样 .

    onPressTwo = () => {
  this.setState({
     whatDay: "dayTwo"
  });
};

onPressThree = () => {
  this.setState({
     whatDay: "dayThree"
  });
};
....

    并将每个按钮传递给各自的按钮 . 或者，您可以在每个按钮中绑定onPress，并使onPress采用变量 .

    onPress = (day) => {
  this.setState({
     whatDay: day
  });
};

    这样绑定它 .

    <TouchableHighlight onPress={this.onPress.bind(this, "dayThree"}>

    你应该考虑至少应用一个Flux或Redux模式，Flux更容易用小东西拿起 . 使用这些模式之一将允许将所有状态存储在与组件无关的某个位置，从而使事情更容易管理 .

    回复于
  • 0
    this.state= {
    whatDay: props.string
};

    你想在这里为你的组件设置初始状态，不知道你打算用props.string做什么，你可以把它设置为一个空字符串 .

    “测试动作onPress更新道具......”，实际上你正在尝试更新状态，道具无法使用setState更新 .

    花一点时间来回顾一下反应基础会对你有所帮助 .

    回复于

相关问题