Question

我正在尝试获得子组件的价值，但没有成功。这是我正在从事的工作...

import React from "react";
import Tooltip from "rc-tooltip";
import Slider, { Range } from "rc-slider";

const Handle = Slider.Handle;

const handle = props => {
   const { value, dragging, index, ...restProps } = props;
   return (
      <Tooltip
         prefixCls="rc-slider-tooltip"
         overlay={value}
         visible={dragging}
         placement="top"
         key={index}
      >
         <Handle value={value} {...restProps} />
      </Tooltip>
   );
};



const Slider = props => {



   return (
      <div>
         <div style={{ width: 300, margin: 30 }}>
            <p>{this.props.title}</p>
            <Slider min={0} max={10} defaultValue={5} handle={handle}/>
         </div>

      </div>
   );
};

export default Slider;

主App.js

import Slider from '.....'

class App extends Component{
     constructor(props){
     super(props);

        this.state = {
              val: 0
        }

      } 

  render() {

   return(

     <Slider onChange={this.state.value} />
    )

}

}

我希望在拖动滑块时获取要更新为App.js状态的值。 onChange不会更新状态。我应该如何修改，以便滑块值能够在this.state.value上更新。

Answer 1

rc-slider中的Slider组件有一个onChange prop事件，它是一个函数。您需要将此方法传递给滑块并更新状态，而不仅仅是传递状态值

import React from "react";
import Tooltip from "rc-tooltip";
import Slider, { Range } from "rc-slider";

const Handle = Slider.Handle;

const handle = props => {
   const { value, dragging, index, ...restProps } = props;
   return (
      <Tooltip
         prefixCls="rc-slider-tooltip"
         overlay={value}
         visible={dragging}
         placement="top"
         key={index}
      >
         <Handle value={value} {...restProps} />
      </Tooltip>
   );
};



const Slider = props => {



   return (
      <div>
         <div style={{ width: 300, margin: 30 }}>
            <p>{this.props.title}</p>
            <Slider min={0} max={10} defaultValue={5} onChange={props.onChange} handle={handle}/>
         </div>

      </div>
   );
};

export default Slider;

class App extends Component{
     constructor(props){
     super(props);

        this.state = {
              val: 0
        }

      } 
  onChange=(value) => {
      this.setState({val: value});
  }
  render() {
     return(
       <Slider onChange={this.onChange} />
     )
  }
}

Answer 2

这是实时代码

https://codesandbox.io/s/n9y97y55kp

如果您有任何疑问，请告诉我

您只需将事件从子组件传递到父组件即可更新值。

Answer 3

根据rc-slider document，您应将功能传递给Slider onChange。

import Slider from '.....'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      val: 0
    }

  }

  handleSliderChange = (value) => {
    console.log(value) // maybe a string or a object
    this.setState({val: value})
  }

  render() {
    return (
      <Slider onChange={this.handleSliderChange} />
    )
  }
}

上面的代码应该起作用

获得子组件的价值

3 个答案: