Javascript 获取子组件的值

我正在尝试获取子组件的值，但尚未成功。这是我正在做的

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;

从“React”导入React；
从“rc工具提示”导入工具提示；
从“rc滑块”导入滑块，{Range}；
常量句柄=Slider.Handle；
常量句柄=道具=>{
常量{value，拖动，索引，…restProps}=props；
返回(
);
};
常量滑块=道具=>{
返回(
{this.props.title}

);
};
导出默认滑块；

Main App.js

import Slider from '.....'

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

        this.state = {
              val: 0
        }

      } 

  render() {

   return(

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

}

}

从“…”导入滑块
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
瓦尔：0
}
} 
render（）{
返回(
)
}
}

---

我希望在拖动滑块时获得更新到此App.js状态的值。onChange未更新状态。我应该如何修改以更新此.state.value上的滑块值。

来自

rc slider

的滑块组件有一个

onChange

prop事件，它是一个函数。您需要将此方法传递给slider并更新状态，而不仅仅是传递状态值

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;

从“React”导入React；
从“rc工具提示”导入工具提示；
从“rc滑块”导入滑块，{Range}；
常量句柄=Slider.Handle；
常量句柄=道具=>{
常量{value，拖动，索引，…restProps}=props；
返回(
);
};
常量滑块=道具=>{
返回(
{this.props.title}

);
};
导出默认滑块；

---

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
瓦尔：0
}
} 
onChange=（值）=>{
this.setState（{val:value}）；
}
render（）{
返回(
)
}
}
这是实时代码


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

您只需将事件从子组件传递到父组件即可更新值。
根据rc slider，您应将函数传递给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} />
    )
  }
}

从“…”导入滑块
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
瓦尔：0
}
}
handleSliderChange=（值）=>{
console.log（value）//可能是字符串或对象
this.setState（{val:value}）
}
render（）{
返回(
)
}
}

上述代码应该有效
您没有设置父组件的状态。它始终为0。此外，this.props.title未定义
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} />
    )
  }
}