如何在无状态组件中使用 react-rangeslider

Question

now in a simple example in react-rangeslider as below

import React, { Component } from 'react'
import Slider from 'react-rangeslider'

class VolumeSlider extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      volume: 0
    }
  }

  handleOnChange = (value) => {
    this.setState({
      volume: value
    })
  }

  render() {
    let { volume } = this.state
    return (
      <Slider
        value={volume}
        orientation="vertical"
        onChange={this.handleOnChange}
      />
    )
  }
}

if i change this into a stateless component

    return (
      <Slider
        value={props.volume}
        orientation="vertical"
        onChange={props.handleOnChange}
      />
    )

and i am handling my state and onChange method in a different state-full component how to i pass the value to the handleOnChange method ?

  handleOnChange = (value) => {
    this.setState({
      volume: value
    })
  }

that's the library i am using https://www.npmjs.com/package/react-rangeslider

Answer 1

you can do something like this and pass the function and the state from the another component as props.

 import React, { Component } from "react";
 import Slider from "react-rangeslider";

 const VolumeSlider = ({onChange,value}) => {
      return <Slider value={value} orientation="vertical" onChange={onChange}/>;
    };