Question

我对React / React-Native非常陌生。我正在构建一个小型应用程序，该应用程序通过使用来自API服务器的数据来呈现热图。我有一个日期选择器，它可以过滤我提取的数据集，从而控制渲染的热图。在获取并渲染热图之后，用户可以在数据集上滑动并查看相应的结果。因此，滑块的最大值和平均值由日期选择器决定。我在每次日期选择器选择一个新日期时都设置状态，并以新状态渲染HeatMap组件（这是包含滑块组件的父组件）。渲染后，我希望我的滑块移动起始位置（值= 0）。但是，滑块似乎处于与先前状态相同的位置。我怎样才能达到预期的行为。

这是我的父组件，其中包括日期选择器和“滑块”组件。

   class Home extends Component {
      constructor(props) {
        let start_date = new Date();
        start_date.setDate(1);
        start_date.setMonth(0);
        start_date.setFullYear(2019);
        let date = getLastBusinessDay(start_date);
        super(props);
        this.state = {
          date: date,
          data: false,
          slider: getGermanFormatDate(date)
        };
      }

  componentWillMount() {
    this.getHeatData();
  }

  getHeatData = () => {
    axios
      .get(heat_data_url, {
        params: {
          date: getGermanFormatDate(this.state.date)
        }
      })
      .then(response => this.setState({ data: response.data }));
  };

  setDate = date => {
    this.setState({ date: date }, this.getHeatData);
    this.setState({ slider: getGermanFormatDate(date) });
  };

  onSlideCallBack = value => {
    this.setState({ slider: value });
    this.setState({ date: makeDateFromString(value) });
  };

  render() {
    if (!this.state.data) {
      return (
        <View style={styles.activityIndicator}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      );
    } else {
      return (
        <View style={styles.main}>
          {/* // Header Menu bar */}
          <View>
            <HeaderComponent
              navigation={this.props.navigation}
              title="Global Risk Alert"
            />
          </View>
          {/* // Headr Menu bar ends */}

          {/* // Main Content section */}
          <View style={styles.content}>
            {/* // Header content */}
            <View
              style={{
                flex: 0,
                height: 50
              }}
            >
              <Text style={styles.headerText}>Global Risk Dynamic</Text>
            </View>
            {/* // Header content ends */}

            {/* Heatmap section */}
            <Heatmap heat_data={this.state.data} date={this.state.date} />
            {/* Heatmap section ends */}
            <View>
              <Text style={styles.headerText}>{this.state.slider}</Text>
            </View>
            {/* Slider section */}
            <DateSlider
              callBack={this.onSlideCallBack}
              data={this.state.data}
            />
            {/* Slider section  ends */}

            {/* DatePicker section */}
            <PickDate
              callBack={this.setDate}
              slider_date={this.state.slider}
              navigation={this.props.navigation}
              data={this.state.data}
            />
            {/* DatePicker section  ends */}
          </View>
          {/* // Main Content section ends */}

          <View>
            <SocialMedia />
          </View>
        </View>
      );
    }
  }
}

这是我的Slider组件

const DateSlider = props => {
    const runCallBack = value => {
    let dates = Object.keys(props.data);
    dates = dates.map(_getDate);

    // dates are of the format ["22.7.2019", "23.7.2019"]
    dates.sort((a, b) => a - b);
    dates = dates.map(getGermanFormatDate);
    props.callBack(dates[value]);
  };
   const _getDate = date_string => {
   // date_string is of the format 22.7.2019
    let date = new Date();
    date.setDate(date_string.split(".")[0]);
    date.setMonth(date_string.split(".")[1] - 1);
    date.setFullYear(date_string.split(".")[2]);
    return date;
  };

  if (getDataLength(props.data) <= 1) {
    return <View />;
  }
  return (
     <View style={styles.container}>
       <Slider
         value={0}
         onValueChange={runCallBack}
         minimumValue={0}
         maximumValue={getDataLength(props.data)}
         step={1}
       />
      </View>
   );
 };

UPDTE：何时应将滑块移回到起始端（重置）：每当我从日期选择器中选择一个新日期时。日期选择器事件调用“ setDate”方法（在父组件中），该方法设置“日期”状态并调用“ getHeatData”方法。 Get heatData获取数据并设置“数据”状态。 “数据”状态指示滑块的“ maximumValue”。因此，基本上我想在每次选择新日期时都将滑块重置（将滑块指针拉回到起始端）。

Answer 1

如果您希望通过特定操作重置滑块值，一种可能的解决方案是从父组件控制其值。

您已经在父母的状态下拥有此值存储，因此您可以将其传递给孩子：

<DateSlider
  callBack={this.onSlideCallBack}
  data={this.state.data}
  sliderValue={this.state.slider}
/>

然后在子组件中，将此值用于滑块：

<Slider
  value={this.props.sliderValue}
  onValueChange={runCallBack}
  minimumValue={0}
  maximumValue={getDataLength(props.data)}
  step={1}
/>

现在您可以随时在父级中更新slider，它将重新呈现滑块。实际上，您已经在setDate中进行了此操作，因此滑块会在选择日期时重新呈现。

渲染父组件后，如何重置本机Slider（子组件）？

1 个答案: