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

Question

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

bundle.js:357 警告：Slider 包含一个 range 类型的输入，同时具有 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 博客建议使用keyprop 强制输入重新渲染，这样您就可以使用新的 props 重新初始化状态。

<Slider key={initialValue}/>