Html 如何在响应更改范围输入说明中使用函数

我正在尝试根据范围设置的值更改能力描述

this.state.capability

。它似乎不起作用。有什么建议吗

export class about extends Component {
      constructor(props) {
        super(props);
        this.state = {
          value: undefined,
          competency: ' '
        };
      }
      
      skillLevel = () => {
          if (this.state.value <= 25) {
          this.setState({
            competency: 'Novice'
          })}
          else if (this.state.value <= 50) {
          this.setState({
            competency: 'Knows things'
          })
        } else if (this.state.value <= 75) {
          this.setState({
            competency: 'Experienced'
          })
        } else if (this.state.value <= 100) {
          this.setState({
            competency: 'Expert'
          })
        }
      }
      
      render() {
        return (
          <div>
          <ul>
            <li>
              <label htmlFor="sales">Sales</label>
                <div className="range" skills={this.skillLevel}>
                  <p>{this.state.competency}</p>
                  <input
                    type="range"
                    min="1"
                    max="100"
                    value={this.state.value}
                    class="slider"
                    id="sales"></input>
              </div>
            </li>
           </ul>
          <div>
        )
     }
    }
    
    export default about;

导出类关于扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：未定义，
能力：“”
};
}
技能水平=（）=>{
如果（this.state.value将函数直接放在元素上没有意义。如果要触发函数，必须通过事件，请查看文档：


当状态是对象并且要更新它时，请小心，确保传递每个属性或复制原始状态，然后使用“扩展”操作符

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：未定义，
能力：“
};
}
技能水平=（）=>{
if（this.state.value）谢谢，William。我已经从div中删除了函数，并将您发布的onChange放在了输入中。我没有得到任何不同的结果。我还需要做什么吗？是的，有。我编辑了我的答案，以使它如我认为您所期望的那样工作。