添加属性到状态React Redux Template

我是React的新手，我开始抓住ReactRedux-CSharp Visual Studio Template并试图添加其他属性来声明状态。我在页面上有一个滑块，当位置改变时我想更新状态。有问题的模块是react-rangeslider。这个例子说，做这样的事情添加属性到状态React Redux Template

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错误打造

TS2339：房产“价值”的类型不存在“只读< {} >”。

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

来源

2017-09-14 Isaac Levin

这是来自Slider组件的TypeScript错误。

它所要表达的是，value={volume}道具传递是undefined（或null，或者非数字值），而它是强类型为Numberhere在组件中。你能打印它的价值吗？

编辑：可能（可能）的文档是错误的，onChange处理程序需要一个事件作为参数，在这种情况下，你应该做的

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

，并报告给作者。

来源

2017-09-14 18:43:54 JulienD

我认为这个问题是有约束力的。如果我将它设置为组件的属性，我会发现它会发生变化，但即使onChange会触发，我可以使用console.log并查看新值，但UI不会随新版本更新 –

我最终只是接线所有redux类似其他示例：/ –

假设您的应用程序将增长，无论如何，您将长期设置Redux。但我会摆脱任何有错误的文档和摇摇欲坠的API的组件。 – JulienD

添加属性到状态React Redux Template

回答

相关问题