Question

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

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

React / JS（ newbie alert ）的新手。让我们深入了解我的问题......

类LinksScreen包含带有道具和外部组件的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: [. . ],
    }
}

标头中的按钮具有自定义onPressX功能，可使用相应的timelineData，dayOne或dayTwo数据更新dayThree道具。

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>

这些是相应的按钮功能，可以为子道具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道具的方法，我希望在按钮点击和道具重新分配后重新渲染。

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

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

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

Answer 1

this.state= {
    whatDay: props.string
};

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

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

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

Answer 2

这里有一些你做的事情有点奇怪。我猜想你的按钮可以运行什么。

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

和

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

除了将对象放入onPress并使用属性＆＃39; whatDay＆＃39;以外，

没有做任何事情。但是，此按钮会传递您创建的实际功能，这是正确的方法。

<TouchableHighlight onPress={this.onPress}>

此外，您无需在onPress函数中返回setState，这些触摸中的每一个都只是执行onPress按钮调用的内容。如果你。有两种方法可以正确地执行此操作，第一种方法是为每个＆＃39;什么日期＆＃39;创建单个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更容易用小东西拿起。使用其中一种模式将允许将所有状态存储在与组件无关的某个位置，从而使事情更容易管理。

在React

2 个答案: