如何在无状态组件中使用 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

你可以做这样的事情，并将另一个组件的函数和状态作为道具传递。

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

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