试图让 React 控制的输入具有默认值

Question

我有一个组件Slider，它只包含一个<div>，用于某个参数的标题，以及一个用于控制其值的输入滑块。它需要标题的道具和该属性的当前值来初始化滑块旋钮的位置。我读过 React 的 controlled components，虽然我认为我理解了基本概念，但我无法让这个输入滑块初始化为 this.props.initialValue。如果我尝试给<input> 一个默认值<input defaultValue={this.props.initialValue}...，我会得到：

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

首先是什么让我阅读了controlled components。我想我了解defaultValue 与存储状态本身的input 元素之间的关系，而这完全是受控组件不是的。

那么我的问题是如何将滑块初始化为一个值？谷歌搜索显示很少，除了以下内容：<input value={this.state.value}... 然后因为在我的构造函数中，我将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>
            )
    }
}

Answer 1

React blog recommends 使用 key 属性强制输入重新渲染，因此您可以使用新的属性重新初始化状态。

<Slider key={initialValue}/>