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

Question

现在在react-rangeslider中的一个简单示例如下

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}
      />
    )
  }
}

如果我将其更改为无状态组件

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

我正在不同的全状态组件中处理我的状态和onChange方法，如何将值传递给handleOnChange方法？

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

这是我正在使用的库 https://www.npmjs.com/package/react-rangeslider

Answer 1

您可以执行类似的操作，并将另一个组件的函数和状态作为 props 传递。

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

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