Реагируйте на родной язык - как получить доступ к значению, на котором находится ползунок в другом компоненте (функции)?

Question

Вот мой код для ползунка:

class RedSlider extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      percentage: 100,
      minPercentage: 0,
      maxPerentage: 100,
    }
  }

  render() {
    const {percentage} = this.state;
    return (
        <View>
            <Slider
                style={{ width: 300}}
                step={1}
                minimumValue={0}
                maximumValue={100}
                value={this.state.percentage}
                thumbTintColor='black'
                maximumTrackTintColor='rgba(255,0,0,1.0)'
                minimumTrackTintColor='rgba(255,0,0,1.0)'
                onValueChange={val => this.setState({ percentage: val })}
            />
            <View style={styles.textCon}>
                <Text style={styles.colorBlack}>{this.state.minPercentage}%</Text>
                <Text style={styles.colorBlack}>
                    {this.state.percentage + '%'}   
                </Text>
                <Text style={styles.colorBlack}>{this.state.maxPerentage}%</Text> 
            </View>
        </View>
    );
  }
}

Я ссылаюсь на ползунок в функции, которая является определенным экраном для моего приложения. Я могу успешно отобразить слайдер и все, поэтому я хорош в этом плане. Я вызываю ползунок следующим образом: Я просто хочу иметь это процентное значение. Спасибо.

Answer 1

Вы создали пример неуправляемого компонента, поэтому состояние сохраняется локально для этого компонента.

Если вы хотите передать значение до родителя, у вас может быть другой обратный вызов onChange, который передает значение выше.

class RedSlider extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      percentage: 100,
      minPercentage: 0,
      maxPercentage: 100,
    }
    this.onChange = this.onChange.bind(this)
  }

  onChange (val) {
    this.setState({ percentage: val })
    props.onValueChange(val)
  } 

  render() {
    const {percentage} = this.state;
    return (
        <View>
            <Slider
                style={{ width: 300}}
                step={1}
                minimumValue={0}
                maximumValue={100}
                value={this.state.percentage}
                thumbTintColor='black'
                maximumTrackTintColor='rgba(255,0,0,1.0)'
                minimumTrackTintColor='rgba(255,0,0,1.0)'
                onValueChange={onChange}
            />
            <View style={styles.textCon}>
                <Text style={styles.colorBlack}>{this.state.minPercentage}%</Text>
                <Text style={styles.colorBlack}>
                    {this.state.percentage + '%'}   
                </Text>
                <Text style={styles.colorBlack}>{this.state.maxPercentage}%</Text> 
            </View>
        </View>
    );
  }
}

Однако, как правило, лучше минимизировать локальное состояние там, где это не нужно, и использовать контролируемый компонент и хранить его только в родительском объекте. Это связано с тем, что значения компонента и родителя могут выйти из syn c.

class RedSlider extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      minPercentage: 0,
      maxPercentage: 100,
    }
  }

  render() {
    return (
        <View>
            <Slider
                style={{ width: 300}}
                step={1}
                minimumValue={0}
                maximumValue={100}
                value={this.props.percentage} // get percentage directly from the parent. 
                thumbTintColor='black'
                maximumTrackTintColor='rgba(255,0,0,1.0)'
                minimumTrackTintColor='rgba(255,0,0,1.0)'
                onValueChange={val => this.props.onValueChange({ percentage: val })} // send changes to the parent by passing a callback to this component
            />
            <View style={styles.textCon}>
                <Text style={styles.colorBlack}>{this.state.minPercentage}%</Text>
                <Text style={styles.colorBlack}>
                    {this.state.percentage + '%'}   
                </Text>
                <Text style={styles.colorBlack}>{this.state.maxPercentage}%</Text> 
            </View>
        </View>
    );
  }
}

Ознакомьтесь с реакционными документами для контролируемых и неконтролируемых компонентов для получения дополнительной информации.