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
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}/>;
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.