Question

我的屏幕上包含许多相同的CustomSlider组件。我想从每个滑块中检索滑块值。

在React Native中这样做的最佳实践是什么？

这是一个最低限度的工作示例，其中包含3个滑块：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import MultiSlider from "@ptomasroos/react-native-multi-slider";

class CustomSlider extends Component {
  constructor(props) {
    super(props)
    this.state = {
      multiSliderValue: [1, 9]
    }
  }
  multiSliderValuesChange = values => {
    this.setState({multiSliderValue: values});
  };
  render(){
    return (
      <MultiSlider
        values={this.state.multiSliderValue}
        onValuesChange={this.multiSliderValuesChange}
        min={0}
        max={10}
        step={1}
      />
    )
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  get_slider_values = () => {
    // what is best practice to access the values of every slider here?
    // eg an object like this
    const slider_values = [[1.4, 7.4], [4.3, 7.0], [1.9, 3.2]]
    return slider_values
  }
  render() {
    return (
      <View style={{alignItems: 'center', justifyContent: 'center', padding: 50}}>
        <CustomSlider />
        <CustomSlider />
        <CustomSlider />
        <Text>{`The slider values are: ` + JSON.stringify(this.get_slider_values())}</Text>
      </View>
    );
  }
}

Answer 1

您可以使用分配给每个孩子的某个键动态存储状态，并使用您为其指定的键访问每个状态。

Answer 2

一种方法是将闭包从上级组件传递到CustomSlider作为道具并监视更改。

<CustomSlider idx={n} 
              theClosurePassedThrough= (n, values) => {
// update the parents states here accordingly
              }
>

然后在适当的时候调用此闭包。

multiSliderValuesChange = values => {
  this.setState({multiSliderValue: values});
  this.props.theClosurePassedThrough(this.props.idx, values);
};

不过，最佳实践是使用MobX或Redux。

从许多相同的子组件中检索状态值

2 个答案: