试图使React受控输入具有默认值

Question

我有一个组件slider，它仅由用于某个参数标题的

和用于控制其值的输入滑块组成。该属性的标题和当前值需要道具来初始化滑块旋钮的位置。我已经阅读了React的受控组件，尽管我认为我理解了基本概念，但我很难将这个输入滑块初始化为 this.props.initialvalue。如果尝试用 为 赋予默认值，则得到：

bundle.js:357警告：滑块包含一个range类型的输入，它同时包含value和defaultValue道具。输入元素必须是受控或不受控的（指定value prop或defaultValue prop，但不能同时指定两者）。决定使用受控或不受控输入元素，并删除这些道具之一。更多信息：链接

这就是我首先阅读Controlled Components的原因。我想我理解了DefaultValue如何与存储状态本身的Input元素相关，而这与受控组件完全无关。

那么我的问题是如何将滑块初始化为一个值？？Google搜索显示的内容很少，除了以下内容:并且由于在构造函数中，我将state.value初始化为this.props.initialvalue，所以我认为组件的第一次呈现会给出一个具有该值的滑块。但事实并非如此。

下面是我当前的组件代码：

class Slider extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            value: props.initialValue
        } 
        this.sliderChanged = this.sliderChanged.bind(this)
    }

    sliderChanged(e) {
        this.setState( { value: e.target.value} );
        this.props.valueChanged(e.target.value)
    }

    render() {

        const containerStyle = {
            display: "grid",
            gridTemplateRows: "2fr 3fr",
            textAlign: "center",
        }

        const titleStyle = {
            backgroundColor: "purple",
            color: "white",
            textAlign: "center",
        }

        const sliderStyle = {
            backgroundColor: "orange",
        }

        console.log(this.state)


        return (
            <div style={containerStyle}>
            <div style={titleStyle}>{this.props.title}</div>
            <div style={sliderStyle}>
            <input 
            type="range" 
            value={this.state.value} 
            onChange={this.sliderChanged} />
            </div>
            </div>
            )
    }
}




共1个答案

匿名用户

React blog建议使用键道具强制输入到rerender，这样您就可以使用新的道具重新初始化状态。

<Slider key={initialValue}/>

Answer 1

相关问题

Answer 2

React blog建议使用键道具强制输入到rerender，这样您就可以使用新的道具重新初始化状态。

<Slider key={initialValue}/>