Question

我是React的新手，我开始抓住ReactRedux-CSharp Visual Studio Template，并试图将其他属性添加到状态。我在页面上有一个滑块，我想在位置发生变化时更新状态。有问题的模块是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}
      />
    )
  }
}

当我添加该代码时，我在Webpack build

上收到错误

TS2339：财产价值＆＃39;类型＆＃39; Readonly＆lt; {}＆gt;＆＃39;。
上不存在

我查看了index.d.ts（声明了状态），我不知道我需要做些什么来添加它。我是否需要为这一个属性连接actionCreators和reducer，还是有更简单的方法？任何帮助将不胜感激。

Answer 1

这是Slider组件中的TypeScript错误。

它所说的value={volume}道具是undefined（或null，或非数字值），而强类型为Number组件中的here。你能打印它的价值吗？

编辑：可能（可能）文档错误，onChange处理程序将事件作为参数，在这种情况下您应该执行

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

并向作者报告。

添加属性到React Redux模板

1 个答案: