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

Question

我有一个组件 Slider仅由 <div> 组成用于某些参数的标题，以及用于控制其值的输入 slider 。它需要标题的 Prop 和该属性的当前值来初始化 slider 旋钮的位置。我读过 React 的 controlled components ，虽然我认为我了解基本概念，但我无法将此输入 slider 初始化为 this.props.initialValue .如果我尝试给 <input>默认值，<input defaultValue={this.props.initialValue}... ，我得到:

bundle.js:357 Warning: Slider contains an input of type range with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: Link

这就是让我阅读 controlled components 的原因首先。我想我明白了 defaultValue与 input 相关元素存储状态本身，这完全不是受控组件的意义所在。

那么我的问题是如何将 slider 初始化为一个值？谷歌搜索显示很少，除了有以下内容: <input value={this.state.value}...然后因为在我的构造函数中，我正在初始化 state.value至 this.props.initialValue ，我认为组件的第一次渲染会给我一个具有该值的 slider 。但事实并非如此。

这是我当前的组件代码:

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 博客 recommends使用 key prop 强制输入重新渲染，因此您可以使用新的 props 重新初始化状态。

<Slider key={initialValue}/>